资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/调用百度API写了一个js翻译小工具

调用百度API写了一个js翻译小工具

NeverSayNever / 1547人阅读

目前还未完成的功能有:textarea高度自适应,移动端与pc端都写了。
效果如图:

html:

</>复制代码 
  2.     
  3.         
  4.           
  5.         
  6.         js翻译工具
  7.         
  8.         
  9.     
  10.     
  11.         
  12.             
  13.                 当前翻译语言类型:
  14.                 英语
  15.                 
  16.                 
    •                     
    • 英语
    •                     
    • 汉语
    •                     
    • 日语
    •                     
    • 韩语
    •                     
    • 法语
    •                     
    • 俄语
    •                     
    • 德语
    •                 
  17.             
  18.             
  19.                 
  20.                 
  21.             
  22.             
  23.                 
  24.                 
  25.             
  26.         
  27.     
  28.     
  29.     
  30.     
  31.

引入md5.js,pc样式:

</>复制代码 
  1. body,html,section,main,header,div,button,ul,li,span,textarea,footer{
  2.     margin: 0;padding: 0;
  3. }
  4. body,html,section,main,header,div,button,ul,li,span,textarea,footer{
  5.     box-sizing: border-box;
  6. }
  7. body,html,section,main,header,div,button,ul,li,textarea,footer{
  8.     display: block;
  9. }
  10. main,.content,.t-header{
  11.     position: relative;
  12.     margin-left: auto;
  13.     margin-right: auto;
  14. }
  15. .lang-panel{
  16.     position: absolute;
  17. }
  18. button,textarea{
  19.     outline: none;
  20. }
  21. ul,li{
  22.     list-style: none;
  23. }
  24. .title,.result {
  25.     font-size: 20px;
  26.     line-height: 45px;
  27.     color: rgb(33, 32, 32,0.99);
  28. }
  29. body{
  30.     font: 16px "微软雅黑";
  31.     overflow: hidden;
  32.     height: 100%;
  33.     width: 100%;
  34.     background-color: #eee;
  35. }
  36. main{
  37.     width: calc(100% - 60px);
  38.     height: auto;
  39.     border: 1px solid #ffffd;
  40.     box-shadow:  0 5px 10px rgba(255, 255, 255, 0.16);
  41.     background: #efebf2;
  42.     border-radius: 15px;
  43.     padding: 10px;
  44.     margin-top: 10px;
  45. }
  46. main .t-header{
  47.     width: 100%;
  48.     height: 45px;
  49.     border-bottom: 1px solid #f2f2f2;
  50. }
  51. .t-header .title{
  52.     text-align: left;
  53.     color: #004000;
  54. }
  55. .t-header .result{
  56.     text-align: right;
  57.     color: #26a9f3;
  58. }
  59. .lang-panel {
  60.     width: calc(80% - 20px);
  61.     height: 42px;
  62.     top: 0;left: 200px;
  63. }
  64. .lang-panel li{
  65.     width: 100px;
  66.     height: 45px;
  67.     line-height: 45px;
  68.     text-align: center;
  69.     margin-left: 16px;
  70.     color: #000000;
  71.     float: left;
  72.     cursor: pointer;
  73. }
  74. .lang-panel li:hover,.lang-panel li:active{
  75.     border-bottom: 1px solid #26a9f3;
  76.     color: #26a9f3;
  77. }
  78. main .content{
  79.     width: 100%;
  80.     height: 400px;
  81.     background-color: transparent;
  82. }
  83. .content textarea{
  84.     border: 1px solid #ccc;
  85.     display: inline-block;
  86.     width: 49%;height: 100%;
  87.     float: left;
  88.     font-size: 18px;
  89.     resize: none;
  90.     overflow-y: auto;
  91.     overflow-x: hidden;
  92. }
  93. .t-footer {
  94.     width: 100%;
  95.     height: 45px;
  96. }
  97. .t-footer button{
  98.     width: 60px;
  99.     height: 45px;
  100.     color: #000000;
  101.     font-size: 16px;
  102.     text-align: center;
  103.     line-height: 45px;
  104.     border: none;
  105.     margin-right: 45px;
  106.     float: right;
  107.     background: transparent;
  108.     outline:none;
  109.     cursor: pointer;
  110. }
  111. .t-footer button:hover{
  112.     color: #26a9f3;
  113.     border-bottom: 1px solid #26a9f3;
  114. }
  115. .lang-panel .checked,.t-footer button.checked{
  116.     color:#26a9f3;
  117.     border-bottom: 1px solid #26a9f3;
  118. }

移动端样式:

</>复制代码 
  1. body,html,section,main,header,div,button,ul,li,span,textarea,footer{
  2.     margin: 0;padding: 0;
  3. }
  4. body,html,section,main,header,div,button,ul,li,span,textarea,footer{
  5.     -webkit-box-sizing: border-box;
  6.     box-sizing: border-box;
  7. }
  8. body,html,section,main,header,div,button,ul,li,textarea,footer{
  9.     display: block;
  10. }
  11. main,.content,.t-header{
  12.     position: relative;
  13.     margin-left: auto;
  14.     margin-right: auto;
  15. }
  16. button,textarea{
  17.     outline: none;
  18. }
  19. ul,li{
  20.     list-style: none;
  21. }
  22. .title,.result {
  23.     font-size: 20px;
  24.     line-height: 45px;
  25.     color: rgb(33, 32, 32,0.99);
  26. }
  27. body{
  28.     font: 16px "微软雅黑";
  29.     overflow-x: hidden;
  30.     overflow-y: auto;
  31.     height: 100%;
  32.     width: 100%;
  33.     background-color: #eee;
  34. }
  35. main{
  36.     width: 100%;
  37.     height: 100%;
  38.     border: 1px solid #ffffd;
  39.     -webkit-box-shadow:  0 5px 10px rgba(255, 255, 255, 0.16);
  40.     box-shadow:  0 5px 10px rgba(255, 255, 255, 0.16);
  41.     background: #efebf2;
  42.     border-radius: 15px;
  43.     padding: 10px;
  44.     margin-top: 10px;
  45. }
  46. .t-header{
  47.     width: 100%;
  48.     min-height: 45px;
  49. }
  50. .more{
  51.     position: absolute;
  52.     top: 1px;
  53.     right: 5px;
  54.     font-size: 40px;
  55.     color: #26a9f3;
  56.     cursor: pointer;
  57.     display: none;
  58. }
  59. .t-header .title{
  60.     text-align: left;
  61.     color: #004000;
  62. }
  63. .t-header .result{
  64.     text-align: right;
  65.     color: #26a9f3;
  66. }
  67. .lang-panel{
  68.     width: 100%;
  69. }
  70. .lang-panel li{
  71.     width: 100%;
  72.     text-align: center;
  73.     color: #000000;
  74.     font-size: 25px;
  75.     cursor: pointer;
  76. }
  77. .lang-panel li:hover,.lang-panel li:active{
  78.     color: #26a9f3;
  79. }
  80. main .content{
  81.     width: 100%;
  82.     height: 400px;
  83.     background-color: transparent;
  84. }
  85. .content textarea{
  86.     border: 1px solid #ccc;
  87.     display: inline-block;
  88.     width: 100%;
  89.     height: 200px;
  90.     font-size: 18px;
  91.     resize: none;
  92.     overflow-y: auto;
  93.     overflow-x: hidden;
  94. }
  95. .t-footer {
  96.     width: 100%;
  97.     height: 45px;
  98. }
  99. .t-footer button{
  100.     width: calc(50% - 2px);
  101.     height: 45px;
  102.     color: #000000;
  103.     float: left;
  104.     font-size: 16px;
  105.     text-align: center;
  106.     line-height: 45px;
  107.     border: none;
  108.     background: transparent;
  109.     outline:none;
  110.     cursor: pointer;
  111. }
  112. .t-footer button:hover{
  113.     color: #26a9f3;
  114.     border-bottom: 1px solid #26a9f3;
  115. }
  116. .lang-panel .checked,.t-footer button.checked{
  117.     color:#26a9f3;
  118.     border-bottom: 1px solid #26a9f3;
  119. }
  120. @font-face {font-family: "iconfont";
  121.     src: url("iconfont.eot?t=1540120521115"); /* IE9*/
  122.     src: url("iconfont.eot?t=1540120521115#iefix") format("embedded-opentype"), /* IE6-IE8 */
  123.         url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAPcAAsAAAAABiQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY9CUiFY21hcAAAAYAAAABLAAABcOe7t2NnbHlmAAABzAAAAC0AAAAw51HPw2hlYWQAAAH8AAAALAAAADYTA0UPaGhlYQAAAigAAAAcAAAAJAfeA4NobXR4AAACRAAAAAgAAAAICAAAAGxvY2EAAAJMAAAABgAAAAYAGAAAbWF4cAAAAlQAAAAgAAAAIAEPABhuYW1lAAACdAAAAUUAAAJtPlT+fXBvc3QAAAO8AAAAHQAAAC5udm97eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeTX42mbnhfwNDDHMDQwNQmBEkBwD0HQ0JeJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISfzb5/38YCeSzgEkGRjaGUcADJmWgPHBYQTADIwCQbwu1AHicY2BmAALmBqYGBmYGdgZuBgZzRVMIFFU0bWBm+MsAwQ2hDWFXQ0MBjR8IxQAAAHicY2BkYGAAYqfCfVXx/DZfGbhZGEDg+qeGk8g0CwNTA5DiYGAC8QA1gQpQeJxjYGRgYG7438AQw8IAAkCSkQEVMAEARwgCawQAAAAEAAAAAAAAAAAYAAAAAQAAAAIADAADAAAAAAACAAAACgAKAAAA/wAAAAAAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgImRiZGZgSU3Na+UgQEAChUBzwAAAA==") format("woff"),
  124.         url("iconfont.ttf?t=1540120521115") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  125.         url("iconfont.svg?t=1540120521115#iconfont") format("svg"); /* iOS 4.1- */
  126. }
  127. .iconfont {
  128.     font-family:"iconfont" !important;
  129. /*    font-size:16px;*/
  130.     font-style:normal;
  131.     -webkit-font-smoothing: antialiased;
  132.     -moz-osx-font-smoothing: grayscale;
  133. }
  134. .menu:before { content: "e693"; }

js代码:

</>复制代码 
  1. /***************************************************/
  2. /* 功能：一些易用的方法函数的原生JavaScript实现 */
  3. /***************************************************/
  4. /**
  5. * 功能：自定义选择器
  6. * 方法qr()：获取元素列表中指定索引的元素
  7. * 方法click()：为元素列表中所有的元素都添加一个点击事件
  8. * 参数：CSS的ID、Class和标签选择器
  9. **/
  10. function qr(ident) {
  11.     var selector,
  12.         sType = ident.slice(0,1),
  13.         identTxt = ident.slice(1);
  14.     if (/^[#.]/.test(sType)) {
  15.         if (sType == "#") {
  16.             selector = document.getElementById(identTxt);
  17.         }
  18.         else if(sType == ".") {
  19.             selector = document.getElementsByClassName(identTxt);
  20.         }
  21.     }
  22.     else {
  23.         selector = document.getElementsByTagName(ident);
  24.     }
  25.     // 给获取到的元素列表内的每一个元素添加一个点击事件
  26.     function sclick(callback) {
  27.         for(var i = 0; i < selector.length; i++) {
  28.             selector[i].index = i;
  29.             selector[i].onclick = function() {
  30.                 callback();
  31.                 console.log(this.index);
  32.             }
  33.         }
  34.     }
  35.     // 获取元素数组内指定索引的元素
  36.     function getIndextElement(index) {
  37.         return selector[index];
  38.     }
  39.     return {
  40.         eq: getIndextElement,
  41.         click: sclick
  42.     };
  43. }
  44. /**
  45. * 功能：给尚未生成的元素绑定特定事件的函数
  46. * 参数：1、事件类型；2、选择标识符（标签名或class名）；3、需要执行的事件
  47. **/
  48. function onEvent(action,selector,callback){
  49.     document.addEventListener(action,function(e){
  50.         if(selector==e.target.tagName.toLowerCase() || selector==e.target.className){
  51.             callback();
  52.         }
  53.     });
  54. }
  55. Element.prototype.hasClass = function(classname) {
  56.     var classlist = this.classList;
  57.     var bool = false;
  58.     classlist.forEach(function(ele,idx) {
  59.         if(ele == classname) {
  60.             bool = true;
  61.         }
  62.     });
  63.     return bool;
  64. }
  65. //如果是移动端
  66. if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
  67.     var link = qr("link").eq(0),more = qr(".more").eq(0),flag = true;
  68.     link.href ="./css/indexmobile.css";
  69.     qr(".lang-panel").eq(0).style.display = "none";
  70.     more.style.display = "block";
  71.     qr(".more").click(function(){
  72.         if(flag){
  73.             qr(".lang-panel").eq(0).style.display = "block";
  74.             flag = false;
  75.         }else{
  76.             qr(".lang-panel").eq(0).style.display = "none";
  77.             flag = true;
  78.         }
  79.     })
  80. }
  81. /*
  82.  * 功能:javascript翻译工具
  83.  * 日期:2017/10/26
  84.  * 作者:loho
  85.  */
  86. /*变量定义部分*/
  87. var type = qr(".lang-panel").eq(0).children;//获取语言类型标签
  88. var result = qr(".result").eq(0);//获取语言选择后的结果标签
  89. var input = qr(".input").eq(0),//获取输入内容标签
  90.     output = qr(".output").eq(0);//获取输出结果标签
  91. var transBtn = qr(".transbtn").eq(0),//获取翻译按钮
  92.     clear = qr(".clear").eq(0);//获取清除按钮
  93. var lang = "en",//语言类型
  94.     timer = null,//定时器
  95.     len = type.length;//语言类型标签的长度
  96. (function () {
  97.     function createScript(src) {
  98.         //创建一个script标签
  99.         var script = document.createElement("script");
  100.         //添加src和id属性
  101.         script.id = "scriptSrc";
  102.         script.src = src;
  103.         //将script标签添加到body页面中
  104.         document.body.appendChild(script);
  105.     }
  106.     function changeType() {
  107.         //获取到属性data-type,此时this指向获取的语言类型标签
  108.         lang = this.getAttribute("data-type");
  109.         this.className = "checked";
  110.         for (var j = 0; j < len; j++) {
  111.             if (this !== type[j]) {
  112.                 type[j].classList.remove("checked");
  113.                 if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
  114.                     qr(".lang-panel").eq(0).style.display = "none";
  115.                 }
  116.                 flag = true;
  117.             }
  118.         }
  119.         //然后将语言类型值赋值给结果标签
  120.         result.innerHTML = this.innerHTML;
  121.     }
  122.     function translate() {
  123.         //获取接口
  124.         var value = "http://api.fanyi.baidu.com/api/trans/vip/translate?";
  125.         //获取当前时间
  126.         var date = Date.now();
  127.         //此处拼接接口数据,好转换成jsonp数据格式,实现跨域访问
  128.         var str = "20180416000147222" + input.value + date + "IvlTe9ogsiBHl9Muevzu";
  129.         //使用加密算法计算数据
  130.         var md5 = MD5(str);
  131.         //然后得到的数据
  132.         var data = "q=" + input.value + "&from=auto&to=" + lang + "&appid=20180416000147222" + "&salt=" + date + "&sign=" + md5 + "&callback=callbackName";
  133.         //引入src路径
  134.         var src = value + data;
  135.         //调用创建script标签函数
  136.         createScript(src);
  137.     }
  138.     function init() {
  139.         //循环添加点击事件
  140.         for (var i = 0; i < len; i++) {
  141.             //点击时间就是改变语言类型
  142.             type[i].onclick = changeType;
  143.         }
  144.         //清除按钮点击事件
  145.         clear.onclick = function () {
  146.             input.value = "";
  147.             this.className = "checked";
  148.             transBtn.className = "";
  149.         }
  150.         //点击翻译
  151.         transBtn.onclick = function () {
  152.             this.className = "checked";
  153.             clear.className = ""
  154.             //如果输入内容为空则返回
  155.             if (!input.value) {
  156.                 return;
  157.             }
  158.             //获取创建的script标签
  159.             var s = document.getElementById("scriptSrc");
  160.             //如果script标签已经存在删除了重新创建
  161.             if (s) {
  162.                 s.parentNode.removeChild(s);
  163.                 translate();
  164.             } else {
  165.                 translate();
  166.             }
  167.         }
  168.     }
  169.     init();
  170. })();
  171. //回调函数定义
  172. function callbackName(str) {
  173.     // console.log(str);
  174.     return output.innerHTML = str.trans_result[0].dst;
  175. }

鄙人创建了一个QQ群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码：

GPU云服务器 云服务器 js调用百度地图api 百度地图api调用 调用百度短地址API接口 js调用百度页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53323.html

相关文章

  • 调用百度API写了一个js翻译小工具

    目前还未完成的功能有:textarea高度自适应,移动端与pc端都写了。效果如图: showImg(https://segmentfault.com/img/bVbjOTB?w=1920&h=610); showImg(https://segmentfault.com/img/bVbjOTG?w=574&h=862); html: ...

    TNFE 评论0 收藏0

  • 调用百度API写了一个js翻译小工具

    目前还未完成的功能有:textarea高度自适应,移动端与pc端都写了。效果如图: showImg(https://segmentfault.com/img/bVbjOTB?w=1920&h=610); showImg(https://segmentfault.com/img/bVbjOTG?w=574&h=862); html: ...

    shadowbook 评论0 收藏0

  • 小demo原生js同步翻译，可以玩玩儿

    摘要：背景平时不知道用写什么练手，这里就写了一个类似百度翻译的小。对于学生党，能进入学校实验室做项目更好。本文分享到此结束，笔者技术有限，理解有误的地方还请大家多提，大家可以共同学习。 1. 背景： 平时不知道用js写什么练手，这里就写了一个类似百度翻译的小demo。大家可以平时没事儿了看看书，写写像这种类型的小demo,调用以下公开的api即可。对于学生党，能进入学校实验室做项目更好。进不...

    didikee 评论0 收藏0

  • 小demo原生js同步翻译，可以玩玩儿

    摘要：背景平时不知道用写什么练手，这里就写了一个类似百度翻译的小。对于学生党，能进入学校实验室做项目更好。本文分享到此结束，笔者技术有限，理解有误的地方还请大家多提，大家可以共同学习。 1. 背景： 平时不知道用js写什么练手，这里就写了一个类似百度翻译的小demo。大家可以平时没事儿了看看书，写写像这种类型的小demo,调用以下公开的api即可。对于学生党，能进入学校实验室做项目更好。进不...

    happen 评论0 收藏0

发表评论

登陆后可评论

0条评论

NeverSayNever

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<