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

先来个在线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样式呢.嘿嘿!