原生JS实战开发同步翻译(附源代码)

原生JS实战开发同步翻译(附源代码)

Scroll Down

1. 背景:

平时不知道用js写什么练手,这里就写了一个类似百度翻译的小demo。大家可以平时没事儿了看看书,写写像这种类型的小demo,调用以下公开的api即可。对于学生党,能进入学校实验室做项目更好。进不去的,平时写写小demo练练也不差。(我为什么没在实验室)

2. demo前准备工作:

  1. 页面布局
  2. 了解百度翻译API,所需配置参数
  3. 准备 MD5.js 加密算法函数(百度自己搜)
  4. 写js代码

3. 步骤:

  1. 页面布局:布局就不说了,直接贴图上代码:

image.png

可进行语言切换

image.png

html代码:

 
  1. 要翻译为:
  2. 英文
    • 英语
    • 中文
    • 日语
    • 韩语
    • 法语
    • 俄语
    • 德语
  • 翻译结果:
  • css代码:

     
    
    1. *{
    2. margin: 0;
    3. padding: 0;
    4. font-family: "微软雅黑";
    5. }
    6. html,body {
    7. height: 100%;
    8. }
    9. li {
    10. list-style: none;
    11. }
    12. body {
    13. overflow: hidden;
    14. }
    15. #main {
    16. width: 1000px;
    17. height: 80%;
    18. margin: 5% auto;
    19. }
    20. #main .left {
    21. float: left;
    22. width: 350px;
    23. height:330px;
    24. margin: 50px 0 0 50px;
    25. background-color: #fff;
    26. border: 1px solid #000;
    27. box-sizing: border-box;
    28. color: #fff;
    29. border-top-left-radius: 15px;
    30. border-top-right-radius: 15px;
    31. }
    32. #main .right {
    33. float: right;
    34. width: 350px;
    35. height: 330px;
    36. margin: 50px 50px 0 0;
    37. background-color: #fff;
    38. box-sizing: border-box;
    39. border: 1px solid #000;
    40. border-top-left-radius: 15px;
    41. border-top-right-radius: 15px;
    42. }
    43. #main .title {
    44. width: 100%;
    45. height: 40px;
    46. background-color: #333;
    47. line-height: 40px;
    48. text-indent: 20px;
    49. position: relative;
    50. color: #fff;
    51. border-top-left-radius: 15px;
    52. border-top-right-radius: 15px;
    53. }
    54. #main .lang {
    55. height: 40px;
    56. line-height: 40px;
    57. text-indent: 20px;
    58. letter-spacing: 2px;
    59. text-decoration: underline;
    60. color: #58a;
    61. cursor: pointer;
    62. }
    63. #main .lang:hover {
    64. text-decoration: none;
    65. color: #eee;
    66. }
    67. #main .text {
    68. width: 100%;
    69. height: 288px;
    70. padding: 20px;
    71. box-sizing: border-box;
    72. resize: none;
    73. outline: none;
    74. border: none;
    75. }
    76. #main .right .cont {
    77. width: 100%;
    78. height: 295px;
    79. padding: 20px;
    80. box-sizing: border-box;
    81. }
    82. #main .bottom {
    83. float: left;
    84. width: 100%;
    85. height: 40px;
    86. margin-top: 60px;
    87. }
    88. #main .bottom button {
    89. float: right;
    90. width: 65px;
    91. height: 35px;
    92. line-height: 35px;
    93. letter-spacing: 2px;
    94. border: none;
    95. margin-right: 50px;
    96. border-radius: 3px;
    97. outline: none;
    98. cursor: pointer;
    99. color: #eee;
    100. background-color: #333;
    101. }
    102. #main ul {
    103. width: 100%;
    104. padding: 20px 15px 0 20px;
    105. box-sizing: border-box;
    106. position: absolute;
    107. background: blue;
    108. background-color: #fff;
    109. border-bottom: 1px solid #333;
    110. display: none;
    111. }
    112. #main ul li {
    113. float:left;
    114. text-indent: 0;
    115. text-align: center;
    116. padding: 0 10px;
    117. margin: 0 10px;
    118. margin-bottom: 20px;
    119. border: 1px solid #000;
    120. border-radius: 5px;
    121. box-sizing: border-box;
    122. color: #333;
    123. cursor: pointer;
    124. }
    125. #main ul li:hover {
    126. background-color: #333;
    127. color: #fff;
    128. }
      2,了解百度翻译API

    这只只对所配置的参数做一介绍,官方API也有做解释:

    进入百度翻译,左下角如图:

    img

    点击百度翻译开放平台:

    img

     

    img

    3.准备MD5加密函数(可以百度自己搜,这里直接附代码)

    MD5加密字符串:

     
    
    1. var MD5 = function (string) {
    2. function RotateLeft(lValue, iShiftBits) {
    3. return (lValue<<iShiftBits) | (lValue>>>(32-iShiftBits));
    4. }
    5. function AddUnsigned(lX,lY) {
    6. var lX4,lY4,lX8,lY8,lResult;
    7. lX8 = (lX & 0x80000000);
    8. lY8 = (lY & 0x80000000);
    9. lX4 = (lX & 0x40000000);
    10. lY4 = (lY & 0x40000000);
    11. lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF);
    12. if (lX4 & lY4) {
    13. return (lResult 0x80000000 lX8 ^ lY8);
    14. }
    15. if (lX4 | lY4) {
    16. if (lResult & 0x40000000) {
    17. return (lResult 0xC0000000 lX8 ^ lY8);
    18. } else {
    19. return (lResult 0x40000000 lX8 ^ lY8);
    20. }
    21. } else {
    22. return (lResult lX8 lY8);
    23. }
    24. }
    25. function F(x,y,z) { return (x & y) | ((~x) & z); }
    26. function G(x,y,z) { return (x & z) | (y & (~z)); }
    27. function H(x,y,z) { return (x y z); }
    28. function I(x,y,z) { return (y ^ (x | (~z))); }
    29. function FF(a,b,c,d,x,s,ac) {
    30. a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac));
    31. return AddUnsigned(RotateLeft(a, s), b);
    32. };
    33. function GG(a,b,c,d,x,s,ac) {
    34. a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac));
    35. return AddUnsigned(RotateLeft(a, s), b);
    36. };
    37. function HH(a,b,c,d,x,s,ac) {
    38. a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac));
    39. return AddUnsigned(RotateLeft(a, s), b);
    40. };
    41. function II(a,b,c,d,x,s,ac) {
    42. a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac));
    43. return AddUnsigned(RotateLeft(a, s), b);
    44. };
    45. function ConvertToWordArray(string) {
    46. var lWordCount;
    47. var lMessageLength = string.length;
    48. var lNumberOfWords_temp1=lMessageLength + 8;
    49. var lNumberOfWords_temp2=(lNumberOfWords_temp1-(lNumberOfWords_temp1 % 64))/64;
    50. var lNumberOfWords = (lNumberOfWords_temp2+1)*16;
    51. var lWordArray=Array(lNumberOfWords-1);
    52. var lBytePosition = 0;
    53. var lByteCount = 0;
    54. while ( lByteCount < lMessageLength ) {
    55. lWordCount = (lByteCount-(lByteCount % 4))/4;
    56. lBytePosition = (lByteCount % 4)*8;
    57. lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount)<<lBytePosition));
    58. lByteCount++;
    59. }
    60. lWordCount = (lByteCount-(lByteCount % 4))/4;
    61. lBytePosition = (lByteCount % 4)*8;
    62. lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80<<lBytePosition);
    63. lWordArray[lNumberOfWords-2] = lMessageLength<<3;
    64. lWordArray[lNumberOfWords-1] = lMessageLength>>>29;
    65. return lWordArray;
    66. };
    67. function WordToHex(lValue) {
    68. var WordToHexValue="",WordToHexValue_temp="",lByte,lCount;
    69. for (lCount = 0;lCount<=3;lCount++) {
    70. lByte = (lValue>>>(lCount*8)) & 255;
    71. WordToHexValue_temp = "0" + lByte.toString(16);
    72. WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2);
    73. }
    74. return WordToHexValue;
    75. };
    76. function Utf8Encode(string) {
    77. string = string.replace(/\r\n/g,"\n");
    78. var utftext = "";
    79. for (var n = 0; n < string.length; n++) {
    80. var c = string.charCodeAt(n);
    81. if (c < 128) {
    82. utftext += String.fromCharCode(c);
    83. }
    84. else if((c > 127) && (c < 2048)) {
    85. utftext += String.fromCharCode((c >> 6) | 192);
    86. utftext += String.fromCharCode((c & 63) | 128);
    87. }
    88. else {
    89. utftext += String.fromCharCode((c >> 12) | 224);
    90. utftext += String.fromCharCode(((c >> 6) & 63) | 128);
    91. utftext += String.fromCharCode((c & 63) | 128);
    92. }
    93. }
    94. return utftext;
    95. };
    96. var x=Array();
    97. var k,AA,BB,CC,DD,a,b,c,d;
    98. var S11=7, S12=12, S13=17, S14=22;
    99. var S21=5, S22=9 , S23=14, S24=20;
    100. var S31=4, S32=11, S33=16, S34=23;
    101. var S41=6, S42=10, S43=15, S44=21;
    102. string = Utf8Encode(string);
    103. x = ConvertToWordArray(string);
    104. a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;
    105. for (k=0;k<x.length;k+=16) {
    106. AA=a; BB=b; CC=c; DD=d;
    107. a=FF(a,b,c,d,x[k+0], S11,0xD76AA478);
    108. d=FF(d,a,b,c,x[k+1], S12,0xE8C7B756);
    109. c=FF(c,d,a,b,x[k+2], S13,0x242070DB);
    110. b=FF(b,c,d,a,x[k+3], S14,0xC1BDCEEE);
    111. a=FF(a,b,c,d,x[k+4], S11,0xF57C0FAF);
    112. d=FF(d,a,b,c,x[k+5], S12,0x4787C62A);
    113. c=FF(c,d,a,b,x[k+6], S13,0xA8304613);
    114. b=FF(b,c,d,a,x[k+7], S14,0xFD469501);
    115. a=FF(a,b,c,d,x[k+8], S11,0x698098D8);
    116. d=FF(d,a,b,c,x[k+9], S12,0x8B44F7AF);
    117. c=FF(c,d,a,b,x[k+10],S13,0xFFFF5BB1);
    118. b=FF(b,c,d,a,x[k+11],S14,0x895CD7BE);
    119. a=FF(a,b,c,d,x[k+12],S11,0x6B901122);
    120. d=FF(d,a,b,c,x[k+13],S12,0xFD987193);
    121. c=FF(c,d,a,b,x[k+14],S13,0xA679438E);
    122. b=FF(b,c,d,a,x[k+15],S14,0x49B40821);
    123. a=GG(a,b,c,d,x[k+1], S21,0xF61E2562);
    124. d=GG(d,a,b,c,x[k+6], S22,0xC040B340);
    125. c=GG(c,d,a,b,x[k+11],S23,0x265E5A51);
    126. b=GG(b,c,d,a,x[k+0], S24,0xE9B6C7AA);
    127. a=GG(a,b,c,d,x[k+5], S21,0xD62F105D);
    128. d=GG(d,a,b,c,x[k+10],S22,0x2441453);
    129. c=GG(c,d,a,b,x[k+15],S23,0xD8A1E681);
    130. b=GG(b,c,d,a,x[k+4], S24,0xE7D3FBC8);
    131. a=GG(a,b,c,d,x[k+9], S21,0x21E1CDE6);
    132. d=GG(d,a,b,c,x[k+14],S22,0xC33707D6);
    133. c=GG(c,d,a,b,x[k+3], S23,0xF4D50D87);
    134. b=GG(b,c,d,a,x[k+8], S24,0x455A14ED);
    135. a=GG(a,b,c,d,x[k+13],S21,0xA9E3E905);
    136. d=GG(d,a,b,c,x[k+2], S22,0xFCEFA3F8);
    137. c=GG(c,d,a,b,x[k+7], S23,0x676F02D9);
    138. b=GG(b,c,d,a,x[k+12],S24,0x8D2A4C8A);
    139. a=HH(a,b,c,d,x[k+5], S31,0xFFFA3942);
    140. d=HH(d,a,b,c,x[k+8], S32,0x8771F681);
    141. c=HH(c,d,a,b,x[k+11],S33,0x6D9D6122);
    142. b=HH(b,c,d,a,x[k+14],S34,0xFDE5380C);
    143. a=HH(a,b,c,d,x[k+1], S31,0xA4BEEA44);
    144. d=HH(d,a,b,c,x[k+4], S32,0x4BDECFA9);
    145. c=HH(c,d,a,b,x[k+7], S33,0xF6BB4B60);
    146. b=HH(b,c,d,a,x[k+10],S34,0xBEBFBC70);
    147. a=HH(a,b,c,d,x[k+13],S31,0x289B7EC6);
    148. d=HH(d,a,b,c,x[k+0], S32,0xEAA127FA);
    149. c=HH(c,d,a,b,x[k+3], S33,0xD4EF3085);
    150. b=HH(b,c,d,a,x[k+6], S34,0x4881D05);
    151. a=HH(a,b,c,d,x[k+9], S31,0xD9D4D039);
    152. d=HH(d,a,b,c,x[k+12],S32,0xE6DB99E5);
    153. c=HH(c,d,a,b,x[k+15],S33,0x1FA27CF8);
    154. b=HH(b,c,d,a,x[k+2], S34,0xC4AC5665);
    155. a=II(a,b,c,d,x[k+0], S41,0xF4292244);
    156. d=II(d,a,b,c,x[k+7], S42,0x432AFF97);
    157. c=II(c,d,a,b,x[k+14],S43,0xAB9423A7);
    158. b=II(b,c,d,a,x[k+5], S44,0xFC93A039);
    159. a=II(a,b,c,d,x[k+12],S41,0x655B59C3);
    160. d=II(d,a,b,c,x[k+3], S42,0x8F0CCC92);
    161. c=II(c,d,a,b,x[k+10],S43,0xFFEFF47D);
    162. b=II(b,c,d,a,x[k+1], S44,0x85845DD1);
    163. a=II(a,b,c,d,x[k+8], S41,0x6FA87E4F);
    164. d=II(d,a,b,c,x[k+15],S42,0xFE2CE6E0);
    165. c=II(c,d,a,b,x[k+6], S43,0xA3014314);
    166. b=II(b,c,d,a,x[k+13],S44,0x4E0811A1);
    167. a=II(a,b,c,d,x[k+4], S41,0xF7537E82);
    168. d=II(d,a,b,c,x[k+11],S42,0xBD3AF235);
    169. c=II(c,d,a,b,x[k+2], S43,0x2AD7D2BB);
    170. b=II(b,c,d,a,x[k+9], S44,0xEB86D391);
    171. a=AddUnsigned(a,AA);
    172. b=AddUnsigned(b,BB);
    173. c=AddUnsigned(c,CC);
    174. d=AddUnsigned(d,DD);
    175. }
    176. var temp = WordToHex(a)+WordToHex(b)+WordToHex(c)+WordToHex(d);
    177. return temp.toLowerCase();
    178. }
      加密:

    img

    发送请求时别忘了在参数最后面加上一个callback参数用来接收返回值

    img

    callback函数:

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

    4.写js

    这里简单的逻辑就不说了,说说这里的接口请求的实现和实现实时翻译的逻辑(每输入一两个字就会主动给你翻译)。首先这个列子的核心就是jsonp的跨域请求原理很简单,就是每次请求都给他创建一个