侧边栏壁纸
博主头像
乌拉队长博主等级

你只管努力，其余的交给命运

  • 累计撰写 122 篇文章
  • 累计创建 34 个标签
  • 累计收到 31 条评论
标签搜索

目 录CONTENT

文章目录
前端

原生JS实战开发同步翻译（附源代码）

乌拉队长
乌拉队长
2020-02-26 / 0 评论 / 0 点赞 / 1,798 阅读 / 0 字

1. 背景：

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

2. demo前准备工作：

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

3. 步骤：

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

image.png

可进行语言切换

image.png

html代码：

 
  12. 要翻译为：
  13. 英文
    • 英语
    • 中文
    • 日语
    • 韩语
    • 法语
    • 俄语
    • 德语
  • 翻译结果：

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

    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的跨域请求原理很简单，就是每次请求都给他创建一个

    文章目录

    相关文章