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

2022-10-29 13:19:02

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

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

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

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;

}
上一篇：mysql忘记root密码，修改mysql密码


下一篇：Mysql用户密码设置修改和权限分配