国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

小demo原生js同步翻譯,可以玩玩兒

happen / 1290人閱讀

摘要:背景平時(shí)不知道用寫(xiě)什么練手,這里就寫(xiě)了一個(gè)類似百度翻譯的小。對(duì)于學(xué)生黨,能進(jìn)入學(xué)校實(shí)驗(yàn)室做項(xiàng)目更好。本文分享到此結(jié)束,筆者技術(shù)有限,理解有誤的地方還請(qǐng)大家多提,大家可以共同學(xué)習(xí)。

1. 背景:

平時(shí)不知道用js寫(xiě)什么練手,這里就寫(xiě)了一個(gè)類似百度翻譯的小demo。大家可以平時(shí)沒(méi)事兒了看看書(shū),寫(xiě)寫(xiě)像這種類型的小demo,調(diào)用以下公開(kāi)的api即可。對(duì)于學(xué)生黨,能進(jìn)入學(xué)校實(shí)驗(yàn)室做項(xiàng)目更好。進(jìn)不去的,平時(shí)寫(xiě)寫(xiě)小demo練練也不差。(我為什么沒(méi)在實(shí)驗(yàn)室)

2. demo前準(zhǔn)備工作:

頁(yè)面布局

了解百度翻譯API,所需配置參數(shù)

準(zhǔn)備 MD5.js 加密算法函數(shù)(百度自己搜)

寫(xiě)js代碼

3. 步驟:

1. 頁(yè)面布局:
布局就不說(shuō)了,直接貼圖上代碼:

可進(jìn)行語(yǔ)言切換

html代碼




  
  
  


  
要翻譯為: 英文
  • 英語(yǔ)
  • 中文
  • 日語(yǔ)
  • 韓語(yǔ)
  • 法語(yǔ)
  • 俄語(yǔ)
  • 德語(yǔ)
翻譯結(jié)果:

css代碼:

*{
  margin: 0;
  padding: 0;
  font-family: "微軟雅黑";
}
html,body {
  height: 100%;
}
li {
  list-style: none;
}
body {
  overflow: hidden;
}
#main {
  width: 1000px;
  height: 80%;
  margin: 5% auto;
}
#main .left {
  float: left;
  width: 350px;
  height:330px;
  margin: 50px 0 0 50px;
  background-color: #fff;
  border: 1px solid #000;
  box-sizing: border-box;
  color: #fff;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
#main .right {
  float: right;
  width: 350px;
  height: 330px;
  margin: 50px 50px 0 0;
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid #000;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
#main .title {
  width: 100%;
  height: 40px;
  background-color: #333;
  line-height: 40px;
  text-indent: 20px;
  position: relative;
  color: #fff;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
#main .lang {
  height: 40px;
  line-height: 40px;
  text-indent: 20px;
  letter-spacing: 2px;
  text-decoration: underline;
  color: #58a;
  cursor: pointer;
}
#main .lang:hover {
  text-decoration: none;
  color: #eee;
}
#main .text {
  width: 100%;
  height: 288px;
  padding: 20px;
  box-sizing: border-box;
  resize: none;
  outline: none;
  border: none;
}
#main .right .cont {
  width: 100%;
  height: 295px;
  padding: 20px;
  box-sizing: border-box;
}
#main .bottom {
  float: left;
  width: 100%;
  height: 40px;
  margin-top: 60px;
}
#main .bottom button {
  float: right;
  width: 65px;
  height: 35px;
  line-height: 35px;
  letter-spacing: 2px;
  border: none;
  margin-right: 50px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  color: #eee;
  background-color: #333;
}
#main ul {
  width: 100%;
  padding: 20px 15px 0 20px;
  box-sizing: border-box;
  position: absolute;
  background: blue;
  background-color: #fff;
  border-bottom: 1px solid #333;
  display: none;
}
#main ul li {
  float:left;
  text-indent: 0;
  text-align: center;
  padding: 0 10px;
  margin: 0 10px;
  margin-bottom: 20px;
  border: 1px solid #000;
  border-radius: 5px;
  box-sizing: border-box;
  color: #333;
  cursor: pointer;
}
#main ul li:hover {
  background-color: #333;
  color: #fff;
}

2,了解百度翻譯API
這只只對(duì)所配置的參數(shù)做一介紹,官方API也有做解釋:

進(jìn)入百度翻譯,左下角如圖:

點(diǎn)擊百度翻譯開(kāi)放平臺(tái):

q是你要翻譯的字符串

from是你在輸入時(shí)的語(yǔ)言

to是你要翻譯成什么語(yǔ)言

appid是你申請(qǐng)的百度翻譯測(cè)試賬號(hào)(注冊(cè)后秒發(fā))

salt是一個(gè)隨機(jī)數(shù),這里用事件表示

sign是對(duì)拼接的字符串的MD5加密,至于拼接的字符串其實(shí)就是: 待加密字符串 =
appid+q+salt+秘鑰(申請(qǐng)賬號(hào)時(shí)密碼也會(huì)給你) 最后把 待價(jià)密 的字符串傳入MD5函數(shù),返回sign.

完整流程如圖:

3.準(zhǔn)備MD5加密函數(shù)(可以百度自己搜,這里直接附代碼)

MD5加密字符串:

var MD5 = function (string) {

    function RotateLeft(lValue, iShiftBits) {
        return (lValue<>>(32-iShiftBits));
    }

    function AddUnsigned(lX,lY) {
        var lX4,lY4,lX8,lY8,lResult;
        lX8 = (lX & 0x80000000);
        lY8 = (lY & 0x80000000);
        lX4 = (lX & 0x40000000);
        lY4 = (lY & 0x40000000);
        lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF);
        if (lX4 & lY4) {
            return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
        }
        if (lX4 | lY4) {
            if (lResult & 0x40000000) {
                return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
            } else {
                return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
            }
        } else {
            return (lResult ^ lX8 ^ lY8);
        }
    }

    function F(x,y,z) { return (x & y) | ((~x) & z); }
    function G(x,y,z) { return (x & z) | (y & (~z)); }
    function H(x,y,z) { return (x ^ y ^ z); }
    function I(x,y,z) { return (y ^ (x | (~z))); }

    function FF(a,b,c,d,x,s,ac) {
        a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac));
        return AddUnsigned(RotateLeft(a, s), b);
    };

    function GG(a,b,c,d,x,s,ac) {
        a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac));
        return AddUnsigned(RotateLeft(a, s), b);
    };

    function HH(a,b,c,d,x,s,ac) {
        a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac));
        return AddUnsigned(RotateLeft(a, s), b);
    };

    function II(a,b,c,d,x,s,ac) {
        a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac));
        return AddUnsigned(RotateLeft(a, s), b);
    };

    function ConvertToWordArray(string) {
        var lWordCount;
        var lMessageLength = string.length;
        var lNumberOfWords_temp1=lMessageLength + 8;
        var lNumberOfWords_temp2=(lNumberOfWords_temp1-(lNumberOfWords_temp1 % 64))/64;
        var lNumberOfWords = (lNumberOfWords_temp2+1)*16;
        var lWordArray=Array(lNumberOfWords-1);
        var lBytePosition = 0;
        var lByteCount = 0;
        while ( lByteCount < lMessageLength ) {
            lWordCount = (lByteCount-(lByteCount % 4))/4;
            lBytePosition = (lByteCount % 4)*8;
            lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount)<>>29;
        return lWordArray;
    };

    function WordToHex(lValue) {
        var WordToHexValue="",WordToHexValue_temp="",lByte,lCount;
        for (lCount = 0;lCount<=3;lCount++) {
            lByte = (lValue>>>(lCount*8)) & 255;
            WordToHexValue_temp = "0" + lByte.toString(16);
            WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2);
        }
        return WordToHexValue;
    };

    function Utf8Encode(string) {
        string = string.replace(/
/g,"
");
        var utftext = "";

        for (var n = 0; n < string.length; n++) {

            var c = string.charCodeAt(n);

            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }

        }

        return utftext;
    };

    var x=Array();
    var k,AA,BB,CC,DD,a,b,c,d;
    var S11=7, S12=12, S13=17, S14=22;
    var S21=5, S22=9 , S23=14, S24=20;
    var S31=4, S32=11, S33=16, S34=23;
    var S41=6, S42=10, S43=15, S44=21;

    string = Utf8Encode(string);

    x = ConvertToWordArray(string);

    a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;

    for (k=0;k

加密:

發(fā)送請(qǐng)求時(shí)別忘了在參數(shù)最后面加上一個(gè)callback參數(shù)用來(lái)接收返回值

callback函數(shù):

function fn(str) {
  var result = document.querySelector(".right .cont");
  result.innerHTML = str.trans_result[0].dst;
}

4.寫(xiě)js

這里簡(jiǎn)單的邏輯就不說(shuō)了,說(shuō)說(shuō)這里的接口請(qǐng)求的實(shí)現(xiàn)和實(shí)現(xiàn)實(shí)時(shí)翻譯的邏輯(每輸入一兩個(gè)字就會(huì)主動(dòng)給你翻譯)。首先這個(gè)列子的核心就是jsonp的跨域請(qǐng)求原理很簡(jiǎn)單,就是每次請(qǐng)求都給他創(chuàng)建一個(gè)

中 - 韓

這樣一個(gè)小小的翻譯小Demo就完成了,主要還是練習(xí)原生js,理解跨域請(qǐng)求的原理,其實(shí)跨域請(qǐng)求的方法很多,比如標(biāo)簽的src