调用百度API写了一个js翻译小工具

头像
夕水
    阅读 12 分钟
    2

    目前还未完成的功能有:textarea高度自适应,移动端与pc端都写了。
    效果如图:

    图片描述

    图片描述

    html:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>js翻译工具</title>
        <link rel="stylesheet" href="./css/index.css">
        <style>
         textarea:disabled{
             background-color: #fff;
         }
        </style>
    </head>
    <body>
        <main class="translate">
            <header class="t-header">
                <span class="title">当前翻译语言类型:</span>
                <span class="result">英语</span>
                <div class="iconfont menu more"></div>
                <ul class="lang-panel">
                    <li data-type="en" class="checked">英语</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="翻译结果" disabled></textarea>
            </section>
            <footer class="t-footer">
                <button type="button" class="transbtn">翻译</button>
                <button type="button" class="clear">清除</button>
            </footer>
        </main>
    </body>
    <!--js引入部分-->
    <script src="./plugins/md5.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/index.js"></script>
</html>

    引入md5.js,pc样式:

    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: #efebf2;
    border-radius: 15px;
    padding: 10px;
    margin-top: 10px;
}
main .t-header{
    width: 100%;
    height: 45px;
    border-bottom: 1px solid #f2f2f2;
}
.t-header .title{
    text-align: left;
    color: #004000;
}
.t-header .result{
    text-align: right;
    color: #26a9f3;
}
.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: #000000;
    float: left;
    cursor: pointer;
}
.lang-panel li:hover,.lang-panel li:active{
    border-bottom: 1px solid #26a9f3;
    color: #26a9f3;
}
main .content{
    width: 100%;
    height: 400px;
    background-color: transparent;
}
.content textarea{
    border: 1px solid #ccc;
    display: inline-block;
    width: 49%;height: 100%;
    float: left;
    font-size: 18px;
    resize: none;
    overflow-y: auto;
    overflow-x: hidden;
}
.t-footer {
    width: 100%;
    height: 45px;
}
.t-footer button{
    width: 60px;
    height: 45px;
    color: #000000;
    font-size: 16px;
    text-align: center;
    line-height: 45px;
    border: none;
    margin-right: 45px;
    float: right;
    background: transparent;
    outline:none;
    cursor: pointer;
}
.t-footer button:hover{
    color: #26a9f3;
    border-bottom: 1px solid #26a9f3;
}
.lang-panel .checked,.t-footer button.checked{
    color:#26a9f3;
    border-bottom: 1px solid #26a9f3;
}

    移动端样式:

    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{
    -webkit-box-sizing: border-box;
    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;
}
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-x: hidden;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    background-color: #eee;
}
main{
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    -webkit-box-shadow:  0 5px 10px rgba(255, 255, 255, 0.16);
    box-shadow:  0 5px 10px rgba(255, 255, 255, 0.16);
    background: #efebf2;
    border-radius: 15px;
    padding: 10px;
    margin-top: 10px;
}
.t-header{
    width: 100%;
    min-height: 45px;
}
.more{
    position: absolute;
    top: 1px;
    right: 5px;
    font-size: 40px;
    color: #26a9f3;
    cursor: pointer;
    display: none;
}
.t-header .title{
    text-align: left;
    color: #004000;
}
.t-header .result{
    text-align: right;
    color: #26a9f3;
}
.lang-panel{
    width: 100%;
}
.lang-panel li{
    width: 100%;
    text-align: center;
    color: #000000;
    font-size: 25px;
    cursor: pointer;
}
.lang-panel li:hover,.lang-panel li:active{
    color: #26a9f3;
}
main .content{
    width: 100%;
    height: 400px;
    background-color: transparent;
}
.content textarea{
    border: 1px solid #ccc;
    display: inline-block;
    width: 100%;
    height: 200px;
    font-size: 18px;
    resize: none;
    overflow-y: auto;
    overflow-x: hidden;
}
.t-footer {
    width: 100%;
    height: 45px;
}
.t-footer button{
    width: calc(50% - 2px);
    height: 45px;
    color: #000000;
    float: left;
    font-size: 16px;
    text-align: center;
    line-height: 45px;
    border: none;
    background: transparent;
    outline:none;
    cursor: pointer;
}
.t-footer button:hover{
    color: #26a9f3;
    border-bottom: 1px solid #26a9f3;
}
.lang-panel .checked,.t-footer button.checked{
    color:#26a9f3;
    border-bottom: 1px solid #26a9f3;
}
@font-face {font-family: "iconfont";
    src: url('iconfont.eot?t=1540120521115'); /* IE9*/
    src: url('iconfont.eot?t=1540120521115#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAPcAAsAAAAABiQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY9CUiFY21hcAAAAYAAAABLAAABcOe7t2NnbHlmAAABzAAAAC0AAAAw51HPw2hlYWQAAAH8AAAALAAAADYTA0UPaGhlYQAAAigAAAAcAAAAJAfeA4NobXR4AAACRAAAAAgAAAAICAAAAGxvY2EAAAJMAAAABgAAAAYAGAAAbWF4cAAAAlQAAAAgAAAAIAEPABhuYW1lAAACdAAAAUUAAAJtPlT+fXBvc3QAAAO8AAAAHQAAAC5udm97eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeTX42mbnhfwNDDHMDQwNQmBEkBwD0HQ0JeJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISfzb5/38YCeSzgEkGRjaGUcADJmWgPHBYQTADIwCQbwu1AHicY2BmAALmBqYGBmYGdgZuBgZzRVMIFFU0bWBm+MsAwQ2hDWFXQ0MBjR8IxQAAAHicY2BkYGAAYqfCfVXx/DZfGbhZGEDg+qeGk8g0CwNTA5DiYGAC8QA1gQpQeJxjYGRgYG7438AQw8IAAkCSkQEVMAEARwgCawQAAAAEAAAAAAAAAAAYAAAAAQAAAAIADAADAAAAAAACAAAACgAKAAAA/wAAAAAAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgImRiZGZgSU3Na+UgQEAChUBzwAAAA==') format('woff'),
        url('iconfont.ttf?t=1540120521115') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('iconfont.svg?t=1540120521115#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
    font-family:"iconfont" !important;
/*    font-size:16px;*/
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.menu:before { content: "\e693"; }

    js代码:

    /***************************************************/
/* 功能：一些易用的方法函数的原生JavaScript实现 */
/***************************************************/

/**
* 功能：自定义选择器
* 方法qr()：获取元素列表中指定索引的元素
* 方法click()：为元素列表中所有的元素都添加一个点击事件
* 参数：CSS的ID、Class和标签选择器
**/
function qr(ident) {
    var selector,
        sType = ident.slice(0,1),
        identTxt = ident.slice(1);
    if (/^[#\.]/.test(sType)) {
        if (sType == "#") {
            selector = document.getElementById(identTxt);
        }
        else if(sType == ".") {
            selector = document.getElementsByClassName(identTxt);
        }
    }
    else {
        selector = document.getElementsByTagName(ident);
    }
    // 给获取到的元素列表内的每一个元素添加一个点击事件
    function sclick(callback) {
        for(var i = 0; i < selector.length; i++) {
            selector[i].index = i;
            selector[i].onclick = function() {
                callback();
                console.log(this.index);
            }
        }
    }
    // 获取元素数组内指定索引的元素
    function getIndextElement(index) {
        return selector[index];
    }
    return {
        eq: getIndextElement,
        click: sclick
    };
}

/**
* 功能：给尚未生成的元素绑定特定事件的函数
* 参数：1、事件类型；2、选择标识符（标签名或class名）；3、需要执行的事件
**/
function onEvent(action,selector,callback){
    document.addEventListener(action,function(e){
        if(selector==e.target.tagName.toLowerCase() || selector==e.target.className){
            callback();
        }
    });
}

Element.prototype.hasClass = function(classname) {
    var classlist = this.classList;
    var bool = false;
    classlist.forEach(function(ele,idx) {
        if(ele == classname) {
            bool = true;
        }
    });
    return bool;
}

//如果是移动端
if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
    var link = qr('link').eq(0),more = qr('.more').eq(0),flag = true;
    link.href ="./css/indexmobile.css";
    qr('.lang-panel').eq(0).style.display = 'none';
    more.style.display = 'block';
    qr('.more').click(function(){
        if(flag){
            qr('.lang-panel').eq(0).style.display = 'block';
            flag = false;
        }else{
            qr('.lang-panel').eq(0).style.display = 'none';
            flag = true;
        }
    })
}
/*
 * 功能:javascript翻译工具
 * 日期:2017/10/26
 * 作者:loho
 */
/*变量定义部分*/
var type = qr('.lang-panel').eq(0).children;//获取语言类型标签
var result = qr('.result').eq(0);//获取语言选择后的结果标签
var input = qr('.input').eq(0),//获取输入内容标签
    output = qr('.output').eq(0);//获取输出结果标签
var transBtn = qr('.transbtn').eq(0),//获取翻译按钮
    clear = qr('.clear').eq(0);//获取清除按钮
var lang = "en",//语言类型
    timer = null,//定时器
    len = type.length;//语言类型标签的长度
(function () {
    function createScript(src) {
        //创建一个script标签
        var script = document.createElement('script');
        //添加src和id属性
        script.id = 'scriptSrc';
        script.src = src;
        //将script标签添加到body页面中
        document.body.appendChild(script);
    }
    function changeType() {
        //获取到属性data-type,此时this指向获取的语言类型标签
        lang = this.getAttribute('data-type');
        this.className = 'checked';
        for (var j = 0; j < len; j++) {
            if (this !== type[j]) {
                type[j].classList.remove('checked');
                if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
                    qr('.lang-panel').eq(0).style.display = 'none';
                }
                flag = true;
            }
        }
        //然后将语言类型值赋值给结果标签
        result.innerHTML = this.innerHTML;
    }
    function translate() {
        //获取接口
        var value = 'http://api.fanyi.baidu.com/api/trans/vip/translate?';
        //获取当前时间
        var date = Date.now();
        //此处拼接接口数据,好转换成jsonp数据格式,实现跨域访问
        var str = '20180416000147222' + input.value + date + 'IvlTe9ogsiBHl9Muevzu';
        //使用加密算法计算数据
        var md5 = MD5(str);
        //然后得到的数据
        var data = 'q=' + input.value + '&from=auto&to=' + lang + '&appid=20180416000147222' + '&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 = "";
            this.className = 'checked';
            transBtn.className = '';
        }
        //点击翻译
        transBtn.onclick = function () {
            this.className = 'checked';
            clear.className = ''
            //如果输入内容为空则返回
            if (!input.value) {
                return;
            }
            //获取创建的script标签
            var s = document.getElementById('scriptSrc');
            //如果script标签已经存在删除了重新创建
            if (s) {
                s.parentNode.removeChild(s);
                translate();
            } else {
                translate();
            }
        }
    }
    init();
})();
//回调函数定义
function callbackName(str) {
    // console.log(str);
    return output.innerHTML = str.trans_result[0].dst;
}
    cssjavascripthtml
    夕水
    5.2k 声望5.7k 粉丝

    问之以是非而观其志，穷之以辞辩而观其变，资之以计谋而观其识，告知以祸难而观其勇，醉之以酒而观其性，临之以利而观其廉，期之以事而观其信。

    « 上一篇
    原生js实现手机端导航滑动效果
    下一篇 »
    从零开始学习vue

    引用和评论

    推荐阅读
    头像
    真是惭愧，直到今天，我才搞懂桶排序算法

    夕水赞 1阅读 560

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    0 条评论
    得票最新