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

阿刁爱学习

已于 2023-05-18 08:41:45 修改

阅读量4.8k

点赞数 17

分类专栏：工具类代码文章标签： javascript html 前端自动翻译

于 2022-07-08 16:47:25 首次发布

本文链接：https://blog.csdn.net/ffffffffhh/article/details/125664905

版权

工具类代码专栏收录该内容

2 篇文章

订阅专栏

本文档提供了一个使用HTML、JS和有道词典API创建简单翻译页面的教程，适合初学者。步骤包括注册有道API账户、创建应用并获取ID和密钥，以及编写和运行代码。网页包含汉译英和英译汉功能，通过SHA256加密签名实现API调用。只需填入API密钥和ID，即可运行此代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

代码很简单，适合初学者学习借鉴。可以当成一个小工具使用。
在这里插入图片描述

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

一、注册有道API账户

1.前往有道智云AI开放平台(https://ai.youdao.com/gw.s#/)进行注册。

二、创建应用

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

2.获取应用id和密钥

注意接入方式要选择API

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 = '  '; // 你的应用ID
		var 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。注意一定不要存在空格