使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API（代码可直接运行）

代码很简单，适合初学者学习借鉴。可以当成一个小工具使用。

注意：
1.代码应联网使用。
2.在输入密钥和id时‘ ’里不应有空格

一、注册有道API账户

1.前往有道智云AI开放平台(https://ai.youdao.com/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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdn.bootcdn.net/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: 'http://openapi.youdao.com/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: 'http://openapi.youdao.com/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.保存网页运行即可

创造不易，帮忙点个赞支持一下吧!

使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API（代码可直接运行）相关推荐

uniapp使用网易有道词典接口做一个背单词小程序-单词发音-有道词典接口-不用注册token直接发请求
uniapp使用网易有道词典接口做一个背单词小程序(不用注册token直接发请求) uniapp使用网易有道词典接口做一个背单词小程序-单词发音-有道词典接口用到的接口: *1.获取单词发音(goo ...
python的翻译-用Python做一个简单的翻译工具
编程本身是跟年龄无关的一件事,不论你现在是十四五岁,还是四五十岁,如果你热爱它,并且愿意持续投入其中,必定会有所收获. 本文就来自编程教室一位"小"读者的投稿(互助学习1群里的同学 ...
用html5做一个简单网页_用Python做一个简单的翻译工具
编程本身是跟年龄无关的一件事,不论你现在是十四五岁,还是四五十岁,如果你热爱它,并且愿意持续投入其中,必定会有所收获. 本文就来自编程教室一位"小"读者的投稿(互助学习1群里的同学 ...
用python做简单的地理聚类分析案例_用Python做一个简单的翻译工具
编程本身是跟年龄无关的一件事,不论你现在是十四五岁,还是四五十岁,如果你热爱它,并且愿意持续投入其中,必定会有所收获. 本文就来自编程教室一位"小"读者的投稿(互助学习1群里的同学 ...
用Python做一个简单的翻译工具
编程本身是跟年龄无关的一件事,不论你现在是十四五岁,还是四五十岁,如果你热爱它,并且愿意持续投入其中,必定会有所收获. 很多人学习python,不知道从何学起. 很多人学习python,掌握了基本语法 ...
python制作查询工具发给别人使用_用Python做一个简单的翻译工具
编程本身是跟年龄无关的一件事,不论你现在是十四五岁,还是四五十岁,如果你热爱它,并且愿意持续投入其中,必定会有所收获. 本文就来自编程教室一位"小"读者的投稿(互助学习1群里的同学 ...
python翻译-用Python做一个简单的翻译工具
编程本身是跟年龄无关的一件事,不论你现在是十四五岁,还是四五十岁,如果你热爱它,并且愿意持续投入其中,必定会有所收获. 本文就来自编程教室一位"小"读者的投稿(互助学习1群里的同学 ...
如何用 Python 做一个简单的翻译工具？
前言平时经常在网上翻译一些单词,突发奇想,可不可以直接调某些免费翻译网站的接口呢?然后做一个图形界面的翻译小工具?下面开始实践 (文末送读者福利) 1.先找一下有哪些免费翻译的接口百度了一下关键字 ...
html制作一张网页的素材,帮人做一个简单的HTML页面
前言晚上无聊的时候在逛QQ空间发现了大学墙里有个求助帮忙做网页的信息,于是便联系上了他,要求非常的简单,将PSD网页素材改为HTML页面,我想这应该是他们本学期的计算机作业吧,于是便象征性的收取了些 ...

使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API（代码可直接运行）

使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API（代码可直接运行）

一、注册有道API账户

二、创建应用

1.进入有道云控制台创建应用

2.获取应用id和密钥

3.创建网页

4.保存网页运行即可

使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API（代码可直接运行）相关推荐

最新文章

热门文章