當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/20 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了调用百度API写了一个js翻译小工具小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

目前還未完成的功能有:textarea高度自適應,移動端與pc端都寫了。
效果如圖:

html:

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"><title>js翻譯工具</title><link rel="stylesheet" href="./css/index.css"><style>textarea:disabled{background-color: #fff;}</style></head><body><main class="translate"><header class="t-header"><span class="title">當前翻譯語言類型:</span><span class="result">英語</span><div class="iconfont menu more"></div><ul class="lang-panel"><li data-type="en" class="checked">英語</li><li data-type="zh">漢語</li><li data-type="jp">日語</li><li data-type="kor">韓語</li><li data-type="fra">法語</li><li data-type="ru">俄語</li><li data-type="de">德語</li></ul></header><section class="content"><textarea class="input" placeholder="請輸入你要翻譯的單詞或語句"></textarea><textarea class="output" placeholder="翻譯結果" disabled></textarea></section><footer class="t-footer"><button type="button" class="transbtn">翻譯</button><button type="button" class="clear">清除</button></footer></main></body><script src="./plugins/md5.js"></script><script src="./js/common.js"></script><script src="./js/index.js"></script> </html>

引入md5.js,pc樣式:

移動端樣式:

body,html,section,main,header,div,button,ul,li,span,textarea,footer{margin: 0;padding: 0; } body,html,section,main,header,div,button,ul,li,span,textarea,footer{-webkit-box-sizing: border-box;box-sizing: border-box; } body,html,section,main,header,div,button,ul,li,textarea,footer{display: block; } main,.content,.t-header{position: relative;margin-left: auto;margin-right: auto; } button,textarea{outline: none; } ul,li{list-style: none; } .title,.result {font-size: 20px;line-height: 45px;color: rgb(33, 32, 32,0.99); } body{font: 16px "微軟雅黑";overflow-x: hidden;overflow-y: auto;height: 100%;width: 100%;background-color: #eee; } main{width: 100%;height: 100%;border: 1px solid #ddd;-webkit-box-shadow: 0 5px 10px rgba(255, 255, 255, 0.16);box-shadow: 0 5px 10px rgba(255, 255, 255, 0.16);background: #efebf2;border-radius: 15px;padding: 10px;margin-top: 10px; } .t-header{width: 100%;min-height: 45px; } .more{position: absolute;top: 1px;right: 5px;font-size: 40px;color: #26a9f3;cursor: pointer;display: none; } .t-header .title{text-align: left;color: #004000; } .t-header .result{text-align: right;color: #26a9f3; } .lang-panel{width: 100%; } .lang-panel li{width: 100%;text-align: center;color: #000000;font-size: 25px;cursor: pointer; } .lang-panel li:hover,.lang-panel li:active{color: #26a9f3; } main .content{width: 100%;height: 400px;background-color: transparent; } .content textarea{border: 1px solid #ccc;display: inline-block;width: 100%;height: 200px;font-size: 18px;resize: none;overflow-y: auto;overflow-x: hidden; } .t-footer {width: 100%;height: 45px; } .t-footer button{width: calc(50% - 2px);height: 45px;color: #000000;float: left;font-size: 16px;text-align: center;line-height: 45px;border: none;background: transparent;outline:none;cursor: pointer; } .t-footer button:hover{color: #26a9f3;border-bottom: 1px solid #26a9f3; } .lang-panel .checked,.t-footer button.checked{color:#26a9f3;border-bottom: 1px solid #26a9f3; } @font-face {font-family: "iconfont";src: url('iconfont.eot?t=1540120521115'); /* IE9*/src: url('iconfont.eot?t=1540120521115#iefix') format('embedded-opentype'), /* IE6-IE8 */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'),url('iconfont.ttf?t=1540120521115') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('iconfont.svg?t=1540120521115#iconfont') format('svg'); /* iOS 4.1- */ }.iconfont {font-family:"iconfont" !important; /* font-size:16px;*/font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.menu:before { content: "\e693"; }

js代碼:

/***************************************************/ /* 功能：一些易用的方法函數的原生JavaScript實現 */ /***************************************************//** * 功能：自定義選擇器 * 方法qr()：獲取元素列表中指定索引的元素 * 方法click()：為元素列表中所有的元素都添加一個點擊事件 * 參數：CSS的ID、Class和標簽選擇器 **/ function qr(ident) {var selector,sType = ident.slice(0,1),identTxt = ident.slice(1);if (/^[#\.]/.test(sType)) {if (sType == "#") {selector = document.getElementById(identTxt);}else if(sType == ".") {selector = document.getElementsByClassName(identTxt);}}else {selector = document.getElementsByTagName(ident);}// 給獲取到的元素列表內的每一個元素添加一個點擊事件function sclick(callback) {for(var i = 0; i < selector.length; i++) {selector[i].index = i;selector[i].onclick = function() {callback();console.log(this.index);}}}// 獲取元素數組內指定索引的元素function getIndextElement(index) {return selector[index];}return {eq: getIndextElement,click: sclick}; }/** * 功能：給尚未生成的元素綁定特定事件的函數 * 參數：1、事件類型；2、選擇標識符（標簽名或class名）；3、需要執行的事件 **/ function onEvent(action,selector,callback){document.addEventListener(action,function(e){if(selector==e.target.tagName.toLowerCase() || selector==e.target.className){callback();}}); }Element.prototype.hasClass = function(classname) {var classlist = this.classList;var bool = false;classlist.forEach(function(ele,idx) {if(ele == classname) {bool = true;}});return bool; }//如果是移動端 if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){var link = qr('link').eq(0),more = qr('.more').eq(0),flag = true;link.href ="./css/indexmobile.css";qr('.lang-panel').eq(0).style.display = 'none';more.style.display = 'block';qr('.more').click(function(){if(flag){qr('.lang-panel').eq(0).style.display = 'block';flag = false;}else{qr('.lang-panel').eq(0).style.display = 'none';flag = true;}}) } /** 功能:javascript翻譯工具* 日期:2017/10/26* 作者:loho*/ /*變量定義部分*/ var type = qr('.lang-panel').eq(0).children;//獲取語言類型標簽 var result = qr('.result').eq(0);//獲取語言選擇后的結果標簽 var input = qr('.input').eq(0),//獲取輸入內容標簽output = qr('.output').eq(0);//獲取輸出結果標簽 var transBtn = qr('.transbtn').eq(0),//獲取翻譯按鈕clear = qr('.clear').eq(0);//獲取清除按鈕 var lang = "en",//語言類型timer = null,//定時器len = type.length;//語言類型標簽的長度 (function () {function createScript(src) {//創建一個script標簽var script = document.createElement('script');//添加src和id屬性script.id = 'scriptSrc';script.src = src;//將script標簽添加到body頁面中document.body.appendChild(script);}function changeType() {//獲取到屬性data-type,此時this指向獲取的語言類型標簽lang = this.getAttribute('data-type');this.className = 'checked';for (var j = 0; j < len; j++) {if (this !== type[j]) {type[j].classList.remove('checked');if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){qr('.lang-panel').eq(0).style.display = 'none';}flag = true;}}//然后將語言類型值賦值給結果標簽result.innerHTML = this.innerHTML;}function translate() {//獲取接口var value = 'http://api.fanyi.baidu.com/api/trans/vip/translate?';//獲取當前時間var date = Date.now();//此處拼接接口數據,好轉換成jsonp數據格式,實現跨域訪問var str = '20180416000147222' + input.value + date + 'IvlTe9ogsiBHl9Muevzu';//使用加密算法計算數據var md5 = MD5(str);//然后得到的數據var data = 'q=' + input.value + '&from=auto&to=' + lang + '&appid=20180416000147222' + '&salt=' + date + '&sign=' + md5 + "&callback=callbackName";//引入src路徑var src = value + data;//調用創建script標簽函數createScript(src);}function init() {//循環添加點擊事件for (var i = 0; i < len; i++) {//點擊時間就是改變語言類型type[i].onclick = changeType;}//清除按鈕點擊事件clear.onclick = function () {input.value = "";this.className = 'checked';transBtn.className = '';}//點擊翻譯transBtn.onclick = function () {this.className = 'checked';clear.className = ''//如果輸入內容為空則返回if (!input.value) {return;}//獲取創建的script標簽var s = document.getElementById('scriptSrc');//如果script標簽已經存在刪除了重新創建if (s) {s.parentNode.removeChild(s);translate();} else {translate();}}}init(); })(); //回調函數定義 function callbackName(str) {// console.log(str);return output.innerHTML = str.trans_result[0].dst; }

總結

以上是生活随笔為你收集整理的调用百度API写了一个js翻译小工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： jsplumb dom 位置发生变化，连
下一篇： Puppet 的部署与应用，看这一篇就够