使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API（代码可直接运行）
代码很简单，适合初学者学习借鉴。可以当成一个小工具使用。
注意： 1.代码应联网使用。 2.在输入密钥和id时‘ ’里不应有空格
一、注册有道API账户
1.前往有道智云AI开放平台(/gw.s#/)进行注册。
二、创建应用
1.进入有道云控制台创建应用
2.获取应用id和密钥
3.创建网页
```html<!DOCTYPE html><head><meta charset="utf-8" /><title>翻译网址</title><style>.bj{display: inline-block;width: 38%;font-size: 14px;vertical-align: top;}.wenben {display: block;font-family: ArialMT,"Microsoft YaHei",Arial,sans-serif,Helvetica,STHeiti;width: 100%;min-height: 156px;padding: 0;border: 0;/* background: 0 0; */font-size: 24px;color: #333;line-height: 30px;overflow: auto;}textarea {resize: none;}.wbk {background: #f2f2f2;position: relative;z-index: 1;overflow: hidden;border-radius: 6px;margin-right: 10px;padding: 18px 50px 18px 18px;border: 1px solid transparent;}.btn{margin-top: 95px;}.h{text-align: center;}.body1{text-align: center;}</style></head><body><h1 class="h">翻译工具</h1><div class="body1"><h3>汉译英</h3><div class="bj"><div class="wbk"><textarea dir="auto" id="textIn" class="wenben" placeholder="请输入你要翻译的文字"></textarea></div></div><button type="button" class="btn" onclick="test()">翻译</button><div class="bj"><div class="wbk"><textarea id="textOut" class="wenben"></textarea></div></div><h3>英译汉</h3><div><div class="bj"><div class="wbk"><textarea dir="auto" id="textIn1" class="wenben" placeholder="请输入你要翻译的英语"></textarea></div></div><button type="button" class="btn" onclick="test1()">翻译</button><div class="bj"><div class="wbk"><textarea id="textOut1" class="wenben"></textarea></div></div></div></div><script src="/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="/ajax/libs/crypto-js/4.0.0/crypto-js.js"></script><script type="text/javascript">var appKey = ' '; // 你的应用IDvar key = ' '; // 申请的密钥var from = 'zh-CHS';var to = 'en';function test() {var query = document.getElementById("textIn").value;var salt = (new Date).getTime();var curtime = Math.round(new Date().getTime() / 1000);var str1 = appKey + truncate(query) + salt + curtime + key;var sign = CryptoJS.SHA256(str1).toString(CryptoJS.enc.Hex);$.ajax({url: '/api',type: 'post',dataType: 'jsonp', // jsonp 类型data: {q: query,appKey: appKey,salt: salt,from: from,to: to,sign: sign,signType: "v3",curtime: curtime,},success: function(data) {var dataObj = data.translation;document.getElementById("textOut").value = dataObj;console.log(dataObj);console.log("获取数据成功！");}});function truncate(q) {var len = q.length;if (len <= 20) return q;console.log(q.substring(0, 10) + len + q.substring(len - 10, len));return q.substring(0, 10) + len + q.substring(len - 10, len);}}function test1() {var query = document.getElementById("textIn1").value;var salt = (new Date).getTime();var curtime = Math.round(new Date().getTime() / 1000);var str1 = appKey + truncate(query) + salt + curtime + key;var sign = CryptoJS.SHA256(str1).toString(CryptoJS.enc.Hex);$.ajax({url: '/api',type: 'post',dataType: 'jsonp', // jsonp 类型data: {q: query,appKey: appKey,salt: salt,from: to,to: from,sign: sign,signType: "v3",curtime: curtime,},success: function(data) {var dataObj = data.translation;document.getElementById("textOut1").value = dataObj;console.log(dataObj);console.log("获取数据成功！");}});function truncate(q) {var len = q.length;if (len <= 20) return q;console.log(q.substring(0, 10) + len + q.substring(len - 10, len));return q.substring(0, 10) + len + q.substring(len - 10, len);}}</script></body></html>
填写页面中空白的appID和key。注意一定不要存在空格
4.保存网页运行即可
创造不易，帮忙点个赞支持一下吧!
