原生js简单调用百度翻译API实现的翻译工具

先来个在线demo:

js翻译工具

或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现)

或者直接前往该网址:js翻译工具

或者前往我的github:github(eveningwater,觉得不错希望点个star(谢谢))下载源码

在说之前,先友情提示一下,由于本人审美有问题,所以界面很不美观,不过我相信逻辑功能还是不错的!

 

现在说一下实现思路吧:

 

当然第一步,需要前往百度翻译官网,注册申请一个appid和key,网址如下:百度翻译官网,官网有详细步骤和介绍,我就不多说了.

 

然后呢,我们开始组织思路,既然要翻译,那么就要有输入框,有输入文本,翻译结果放置地方,并且我这里的翻译还有多种翻译,所以需要分类.html代码如下:

<main class="translate">
			<header class="t-header">
				<span class="title">当前翻译语言类型:</span>
				<span class="result">英语</span>
				<ul class="lang-panel">
					<li data-type="en">英语</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="翻译结果"></textarea>
			</section>
			<footer class="t-footer">
				<button type="button" class="transbtn">翻译</button>
				<button type="button" class="clear">清除</button>
			</footer>
		</main>

 

其实html和css代码也没啥好说的,有兴趣的可以修改一下我写的css代码(谁叫写的丑呢,原谅我的审美度).

 

css代码如下:

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{
	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;
}
.lang-panel{
	position: absolute;
}
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: hidden;
	height: 100%;
	width: 100%;
	background-color: #eee;
}
main{
	width: calc(100% - 60px);
	height: auto;
	border: 1px solid #ddd;
	box-shadow:  0 5px 10px rgba(255, 255, 255, 0.16);
	background-color: rgba(16, 2, 2, 0.31);
	padding: 10px;
	margin-top: 10px;
}
main .t-header{
	width: 100%;
	height: 45px;
	background-color: rgba(23, 26, 28, 0.82);
	border-bottom: 1px solid #f2f2f2;
}
.t-header .title{
	text-align: left;
	color: #e544a7;
}
.t-header .result{
	text-align: right;
	color: #e33535;
}
.lang-panel {
	width: calc(80% - 20px);
	height: 42px;
	top: 0;left: 200px;
}
.lang-panel li{
	width: 100px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	margin-left: 16px;
	color: #0012ff;
	float: left;
	cursor: pointer;
}
.lang-panel li:hover{
	background-color: rgba(255, 255, 255, 0.21);
}
main .content{
	width: 100%;
	height: 400px;
	background-color: transparent;
}
.content textarea{
	border: 1px solid #ccc;
	display: inline-block;
	width: 49%;height: 100%;
	margin-left: 10px;
	float: left;
	font-size: 18px;
	overflow-y: auto;
	overflow-x: hidden;
}
.content textarea:focus{
	border: 1px solid rgba(121, 178, 214, 0.82);
	box-shadow: 0 0 10px rgba(121, 178, 214, 0.82);	
}
.t-footer {
	width: 100%;
	height: 45px;
	border-top: 1px solid #f2f2f2;
}
.t-footer button{
	width: 60px;
	height: 45px;
	background-color: rgba(49, 196, 240, 0.92);
	color: #efebf2;
	text-align: center;
	line-height: 45px;
	border: 1px solid rgba(238, 238, 238, 0.17);
	margin-left: 25px;
	margin-right: 15px;
	margin-top: 5px;
	float: right;
	cursor: pointer;
}
.t-footer button:hover{
	transform: scale(1.1);
}

　　

重点还是说一下js逻辑吧,首先调用接口获取得到的数据,由于要跨域,所以就要学jsonp原理将数据通过script标签引入,然后才能访问,然后无非就是一些事件的操作,dom元素的操作与函数的封装写法,基本也没啥了,当然其实关于js代码,我也注释的比较详细的.js代码如下:

(function(){
	/*变量定义部分*/
	var type = document.getElementsByClassName('lang-panel')[0].children;//获取语言类型标签
	var result = document.getElementsByClassName('result')[0];//获取语言选择后的结果标签
	var input = document.getElementsByClassName('input')[0],//获取输入内容标签
		output = document.getElementsByClassName('output')[0];//获取输出结果标签
	var transBtn = document.getElementsByClassName('transbtn')[0],//获取翻译按钮
		clear = document.getElementsByClassName('clear')[0];//获取清除按钮
	var lang = "en",//语言类型
		timer = null,//定时器
		len = type.length;//语言类型标签的长度
	function createScript(src){
		//创建一个script标签
		var script = document.createElement('script');
		//添加src和id属性
		script.id = 'urlData';
		script.src = src;
		//将script标签添加到body页面中
		document.body.appendChild(script);
	}
	function changeType(){
		//获取到属性data-type,此时this指向获取的语言类型标签
		lang = this.getAttribute('data-type');
		//然后将语言类型值赋值给结果标签
		result.innerHTML = this.innerHTML;
	}
	function translate(){
		//获取接口
		var value = 'http://api.fanyi.baidu.com/api/trans/vip/translate?';
		//获取当前时间
		var date = Date.now();
		//此处拼接接口数据,好转换成jsonp数据格式,实现跨域访问
		var str = '20170605000052254' + input.value + date + '63r1c42X7_buc4OrXm1g';
		//使用加密算法计算数据
		var md5 = MD5(str);
		//然后得到的数据
		var data = 'q=' + input.value + '&from=auto&to=' + lang + '&appid=20170605000052254' + '&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 = "";
		}
		//点击翻译
		transBtn.onclick = function(){
			//如果输入内容为空则返回
			if(input.value == ""){
				return;
			}
			//获取创建的script标签
			var s = document.getElementById('urlData');
			//如果script标签已经存在删除了重新创建
			if(s){
				s.parentNode.removeChild(s);
				translate();
			}else{
				translate();
			}
		}
		//键盘按下事件
		output.onkeydown = function(){
			//清除定时器
			clearInterval(timer);
			timer = setInterval(function(){
				if(input.value == ""){
					return;
				}
				//获取创建的script标签
				var s = document.getElementById('urlData');
				if(s){
					s.parentNode.removeChild(s);
					translate();
				}else{
					translate();
				}
			},500);
			clearTimeout(timer);
		}
	}
	init();
})();
//回调函数定义
function callbackName(str){
	console.log(str);
	//再次获取输出结果标签
	var output = document.getElementsByClassName('output')[0];
	output.innerHTML = str.trans_result[0].dst;
}

　　

那是觉得不美观改一下css样式,我之前写好了之后,后面也忘记花时间修改一下j样式呢.嘿嘿!