项目描述
上传时间
浏览人数
利用Js以及百度的免费api接口,链接:
https://apis.baidu.com/store/detail/48137dc8-3ec0-43f6-b139-119107a33d3b
代码部分:
html:
<div class="cont">
<div class="select">
<div class="choose front">
<select class="form-select" id="languageIn" aria-label="Default select example">
<option selected >中文</option>
<option value="1">自动检测语言</option>
<option value="2">英文</option>
<option value="3">日语</option>
</select>
</div>
<div class="choose back">
<select class="form-select" id="languageOut" aria-label="Default select example">
<option selected >英文</option>
<option value="1">自动检测语言</option>
<option value="2">中文</option>
<option value="3">日语</option>
</select>
</div>
<div class="choose type">
<select class="form-select" id="searchEngine" aria-label="Default select example">
<option selected value="1">谷歌</option>
<option value="2">百度</option>
<option value="3">有道</option>
</select>
</div>
<button type="button" class="btn btn-warning">翻译</button>
</div>
<div class="func">
<textarea id="input" placeholder="请输入要翻译的内容:"></textarea>
<div class="result"></div>
</div>
</div>
</body>
css:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 80%;
}
.cont{
width: 80%;
margin: 10% 0 0 10%;
}
.btn{
margin-left: 20px;
}
.select{
width: 60%;
}
.choose{
width: 20%;
height: 50px;
}
.type{
float: left;
width: 20%;
margin-left: 20px;
}
.front{
float: left;
height: 50px;
}
.back{
float: left;
height: 50px;
margin-left: 20px;
}
.func{
margin-top: 50px;
width: 90%;
}
#input{
width: 40%;
height: 300px;
border: 1px solid black;
float: left;
resize: none;
border-radius: 10px;
background: rgba(150,150,150,0.5);
overflow-y: scroll;
}
.result{
width: 40%;
height: 300px;
border: 1px solid black;
float: left;
margin-left: 50px;
border-radius: 10px;
background: rgba(150,150,150,0.5);
overflow-y: scroll;
}
</style>
Js:
<script type="text/javascript">
//封装函数-将选中的文字转为接口所需的格式;
function typeChange(idx1,idx2,idx3){
let web = ["中文","英文","日语","自动检测语言"];
let back= ["zh-cn","en","jp","auto"];
let web2 = ["谷歌","百度","有道"];
let back2 = ["google","baidu","youdao"];
let txt1 = back[web.indexOf(idx1)];
let txt2 = back[web.indexOf(idx2)];
let txt3 = back2[web2.indexOf(idx3)];
return [txt1, txt2, txt3];
}
window.onload = function () {
$(".btn").click(function () {
$(".result").text("正在翻译中...");
//获取各option及textarea的内容;
let languageIn = $("#languageIn option:selected").text();
let languageOut = $("#languageOut option:selected").text();
let SE = $("#searchEngine option:selected").text();
let txt = typeChange(languageIn,languageOut,SE);
languageIn = txt[0];
languageOut = txt[1];
SE = txt[2];
let orgin = $("#input").val();
if(!orgin.replace(/\s+/g, '')){
alert("请输入要翻译的正确内容!");
}
else {
//使用ajax访问接口,获取数据
let url = "https://zhuzuoji.com:8443/baidu_api_translate";
//此处判断,根据返回数据不同,需要做不同的处理
if (SE === "google"){
$.ajax({
url:url,
type:"POST",
data:{appCode:"94639234cadc422d9b2a8b08df941fce",
type:SE,
from:languageIn,
to:languageOut,
text:orgin
},
dataType:"JSON",
success:function (data) {
let tran = data.result.result;
console.log(tran);
$(".result").text("");
$(".result").append(tran);
},
error:function (err) {
//连接端口失败,根据status返回的错误类型,显示不同的错误信息
switch (err.status) {
//端口路径出现问题
case 404:
$(".result").text("地址有误");
break;
//服务器出现问题
case 500:
$(".result").text("服务器崩了T0T");
break;
//用户网络出现问题
case 0:
$(".result").text("网络出现波动,稍后再试");
break;
//未知错误
default:
$(".result").text("出现未知错误!");
break;
}
}
})
}
else {$.ajax({
url:url,
type:"POST",
data:{appCode:"94639234cadc422d9b2a8b08df941fce",
type:SE,
from:languageIn,
to:languageOut,
text:orgin
},
dataType:"JSON",
success:function (data) {
let tran = data.result.result;
let msg = data.msg;
let msg2 = "翻译的目标语种不支持";
//部分情况会出现不支持某些语言,需特殊处理
if(msg === msg2){
$(".result").text($("#searchEngine option:selected").text()+"暂时不支持当前语种,正在尽快完善内容!");
}
console.log(data);
$(".result").text(tran);
},
error:function (err) {
switch (err.status) {
//端口路径出现问题
case 404:
$(".result").text("地址有误");
break;
//服务器出现问题
case 500:
$(".result").text("服务器崩了T0T");
break;
//用户网络出现问题
case 0:
$(".result").text("网络出现波动,稍后再试");
break;
//未知错误
default:
$(".result").text("出现未知错误!");
break;
}
}
})
}
}})
</script>
gif展示: