筑坐极_在线翻译系统

web部分

<body>
<div class="cont">
  <div class="select">
    <div class="choose front">
    <select class="ce" id="In" 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="ec" id="Out" 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="fyq" 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">翻译</button>
       </div>
  <div class="func">
    <textarea id="input" placeholder="请输入要翻译的内容："></textarea>
    <div class="result"></div>
  </div>
</div>

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部分

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 In = $("#In option:selected").text();
    let Out = $("#Out option:selected").text();
    let SE = $("#fyq option:selected").text();
    let txt = typeChange(In,Out,SE);
    In = txt[0];
    Out = 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:In,
            to:Out,
            text:orgin
          },
          dataType:"JSON",
          success:function (data) {
            let tran = data.result.result;
            console.log(tran);
            $(".result").text("");
            $(".result").append(tran);
          },
          error:function (err) {
            console.log(err);
          }
        })
      }
      else {$.ajax({
        url:url,
        type:"POST",
        data:{appCode:"94639234cadc422d9b2a8b08df941fce",
          type:SE,
          from:In,
          to:Out,
          text:orgin
        },
        dataType:"JSON",
        success:function (data) {
          let tran = data.result.result;
          let msg = data.msg;
          let msg2 = "翻译的目标语种不支持";
          if(msg === msg2){
            $(".result").text($("#fyq option:selected").text()+"暂时不支持当前语种,正在尽快完善内容!");
          }
          console.log(data);
          $(".result").text(tran);
        },
        error:function (err) {
          console.log(err);
        }
      })}
    }
  })



}

在线翻译系统

苏林*

在线翻译系统

在线翻译系统

2021.07.08

905人

苏林*

天津市大港区

Hot:13909

苏林*

当前作品暂无评分

还未获得评语哦~