先来个在线demo:
或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现)
或者直接前往该网址:js翻译工具
在说之前,先友情提示一下,由于本人审美有问题,所以界面很不美观,不过我相信逻辑功能还是不错的!
现在说一下实现思路吧:
当然第一步,需要前往百度翻译官网,注册申请一个appid和key,网址如下:百度翻译官网,官网有详细步骤和介绍,我就不多说了.
然后呢,我们开始组织思路,既然要翻译,那么就要有输入框,有输入文本,翻译结果放置地方,并且我这里的翻译还有多种翻译,所以需要分类.html代码如下:
当前翻译语言类型:
英语
- 英语
- 汉语
- 日语
- 韩语
- 法语
- 俄语
- 德语
翻译
清除
其实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样式呢.嘿嘿!