目录

初学js,老师交代的作业,找一串base64编码器,然后将其解码,然后就做了这个,主要就是用到bese64.js,没技术含量,望不要嘲笑。

1.初成:

JavaScript - base64编码解码器

代码:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="Generator" content="EditPlus®">
  6. <meta name="Author" content="">
  7. <meta name="Keywords" content="">
  8. <meta name="Description" content="">
  9. <title>解密</title>
  10. <script type="text/javascript">
  11. function base64Decode(str) {
  12. enc64List = new Array( );
  13. dec64List = new Array( );
  14. var i;
  15. for (i = 0; i < 26; i++) {
  16. enc64List[enc64List.length] = String.fromCharCode(65 + i);
  17. }
  18. for (i = 0; i < 26; i++) {
  19. enc64List[enc64List.length] = String.fromCharCode(97 + i);
  20. }
  21. for (i = 0; i < 10; i++) {
  22. enc64List[enc64List.length] = String.fromCharCode(48 + i);
  23. }
  24. enc64List[enc64List.length] = "+";
  25. enc64List[enc64List.length] = "/";
  26. for (i = 0; i < 128; i++) {
  27. dec64List[dec64List.length] = -1;
  28. }
  29. for (i = 0; i < 64; i++) {
  30. dec64List[enc64List[i].charCodeAt(0)] = i;
  31. }
  32. var c=0, d=0, e=0, f=0, i=0, n=0;
  33. var input = str.split("");
  34. var output = "";
  35. var ptr = 0;
  36. do {
  37. f = input[ptr++].charCodeAt(0);
  38. i = dec64List[f];
  39. if ( f >= 0 && f < 128 && i != -1 ) {
  40. if ( n % 4 == 0 ) {
  41. c = i << 2;
  42. } else if ( n % 4 == 1 ) {
  43. c = c | ( i >> 4 );
  44. d = ( i & 0x0000000F ) << 4;
  45. } else if ( n % 4 == 2 ) {
  46. d = d | ( i >> 2 );
  47. e = ( i & 0x00000003 ) << 6;
  48. } else {
  49. e = e | i;
  50. }
  51. n++;
  52. if ( n % 4 == 0 ) {
  53. output += String.fromCharCode(c) +
  54. String.fromCharCode(d) +
  55. String.fromCharCode(e);
  56. }
  57. }
  58. } while (typeof input[ptr] != "undefined");
  59. output += (n % 4 == 3) ? String.fromCharCode(c) + String.fromCharCode(d) :
  60. ((n % 4 == 2) ? String.fromCharCode(c) : "");
  61. return output;
  62. }
  63. function doDecode() {
  64. var src = document.getElementById('src').value;
  65. document.getElementById('dest').value = base64Decode(src);
  66. }
  67. </script>
  68. </head>
  69. <body>
  70. <p>字符:</p>
  71. <input type="text" name="src" style="width:99%;height:120px;" id="src" value="Nzc3PT09YXNkYXNk" />
  72. <input onclick="doDecode();" type="button" value="解码" name="decode" />
  73. <p>结果:</p>
  74. <input type="text" name="dest" id="dest" style="width:99%;height:120px;"></textarea>
  75. </body>
  76. </html>

最后交上去说偏题了。。。。。。其实就是做多了

2.作业成品:

JavaScript - base64编码解码器

没想到,这样就行了!!!!!当时我就凌乱了~

代码:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="Generator" content="EditPlus®">
  6. <meta name="Author" content="">
  7. <meta name="Keywords" content="">
  8. <meta name="Description" content="">
  9. <title>解密</title>
  10. <script type="text/javascript">
  11. function base64Decode(str) {
  12. enc64List = new Array( );
  13. dec64List = new Array( );
  14. var i;
  15. for (i = 0; i < 26; i++) {
  16. enc64List[enc64List.length] = String.fromCharCode(65 + i);
  17. }
  18. for (i = 0; i < 26; i++) {
  19. enc64List[enc64List.length] = String.fromCharCode(97 + i);
  20. }
  21. for (i = 0; i < 10; i++) {
  22. enc64List[enc64List.length] = String.fromCharCode(48 + i);
  23. }
  24. enc64List[enc64List.length] = "+";
  25. enc64List[enc64List.length] = "/";
  26. for (i = 0; i < 128; i++) {
  27. dec64List[dec64List.length] = -1;
  28. }
  29. for (i = 0; i < 64; i++) {
  30. dec64List[enc64List[i].charCodeAt(0)] = i;
  31. }
  32. var c=0, d=0, e=0, f=0, i=0, n=0;
  33. var input = str.split("");
  34. var output = "";
  35. var ptr = 0;
  36. do {
  37. f = input[ptr++].charCodeAt(0);
  38. i = dec64List[f];
  39. if ( f >= 0 && f < 128 && i != -1 ) {
  40. if ( n % 4 == 0 ) {
  41. c = i << 2;
  42. } else if ( n % 4 == 1 ) {
  43. c = c | ( i >> 4 );
  44. d = ( i & 0x0000000F ) << 4;
  45. } else if ( n % 4 == 2 ) {
  46. d = d | ( i >> 2 );
  47. e = ( i & 0x00000003 ) << 6;
  48. } else {
  49. e = e | i;
  50. }
  51. n++;
  52. if ( n % 4 == 0 ) {
  53. output += String.fromCharCode(c) +
  54. String.fromCharCode(d) +
  55. String.fromCharCode(e);
  56. }
  57. }
  58. } while (typeof input[ptr] != "undefined");
  59. output += (n % 4 == 3) ? String.fromCharCode(c) + String.fromCharCode(d) :
  60. ((n % 4 == 2) ? String.fromCharCode(c) : "");
  61. //return output;
  62. alert(output);
  63. }
  64. // function doDecode() {
  65. // var src = document.getElementById('src').value;
  66. // document.getElementById('dest').value = base64Decode(src);
  67. // }
  68. </script>
  69. </head>
  70. <body>
  71. <!-- <p>字符:</p>
  72. <input type="text" name="src" style="width:99%;height:120px;" id="src" value="Nzc3PT09YXNkYXNk" />
  73. <input onclick="doDecode();" type="button" value="解码" name="decode" />
  74. <p>结果:</p>
  75. <input type="text" name="dest" id="dest" style="width:99%;height:120px;"></textarea> -->
  76. <input onclick="base64Decode('Nzc3PT09YXNkYXNk');" type="button" value="解码"/>
  77. </body>
  78. </html>

作业完成了感觉意犹未尽,又开始优化,把加密功能、结果16进制显示都添加了,最终就成了这样。

3.最终版:

JavaScript - base64编码解码器

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script type="text/javascript">
  7. var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
  8. var base64DecodeChars = new Array(
  9. -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
  10. -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
  11. -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,
  12. 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,
  13. -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
  14. 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1,
  15. -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
  16. 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);
  17. function base64encode(str) {
  18. var out, i, len;
  19. var c1, c2, c3;
  20. len = str.length;
  21. i = 0;
  22. out = "";
  23. while(i < len) {
  24. c1 = str.charCodeAt(i++) & 0xff;
  25. if(i == len)
  26. {
  27. out += base64EncodeChars.charAt(c1 >> 2);
  28. out += base64EncodeChars.charAt((c1 & 0x3) << 4);
  29. out += "==";
  30. break;
  31. }
  32. c2 = str.charCodeAt(i++);
  33. if(i == len)
  34. {
  35. out += base64EncodeChars.charAt(c1 >> 2);
  36. out += base64EncodeChars.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
  37. out += base64EncodeChars.charAt((c2 & 0xF) << 2);
  38. out += "=";
  39. break;
  40. }
  41. c3 = str.charCodeAt(i++);
  42. out += base64EncodeChars.charAt(c1 >> 2);
  43. out += base64EncodeChars.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
  44. out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >>6));
  45. out += base64EncodeChars.charAt(c3 & 0x3F);
  46. }
  47. return out;
  48. }
  49. function base64decode(str) {
  50. var c1, c2, c3, c4;
  51. var i, len, out;
  52. len = str.length;
  53. i = 0;
  54. out = "";
  55. while(i < len) {
  56. /* c1 */
  57. do {
  58. c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
  59. } while(i < len && c1 == -1);
  60. if(c1 == -1)
  61. break;
  62. /* c2 */
  63. do {
  64. c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
  65. } while(i < len && c2 == -1);
  66. if(c2 == -1)
  67. break;
  68. out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));
  69. /* c3 */
  70. do {
  71. c3 = str.charCodeAt(i++) & 0xff;
  72. if(c3 == 61)
  73. return out;
  74. c3 = base64DecodeChars[c3];
  75. } while(i < len && c3 == -1);
  76. if(c3 == -1)
  77. break;
  78. out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));
  79. /* c4 */
  80. do {
  81. c4 = str.charCodeAt(i++) & 0xff;
  82. if(c4 == 61)
  83. return out;
  84. c4 = base64DecodeChars[c4];
  85. } while(i < len && c4 == -1);
  86. if(c4 == -1)
  87. break;
  88. out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
  89. }
  90. return out;
  91. }
  92. function utf16to8(str) {
  93. var out, i, len, c;
  94. out = "";
  95. len = str.length;
  96. for(i = 0; i < len; i++) {
  97. c = str.charCodeAt(i);
  98. if ((c >= 0x0001) && (c <= 0x007F)) {
  99. out += str.charAt(i);
  100. } else if (c > 0x07FF) {
  101. out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
  102. out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
  103. out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
  104. } else {
  105. out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
  106. out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
  107. }
  108. }
  109. return out;
  110. }
  111. function utf8to16(str) {
  112. var out, i, len, c;
  113. var char2, char3;
  114. out = "";
  115. len = str.length;
  116. i = 0;
  117. while(i < len) {
  118. c = str.charCodeAt(i++);
  119. switch(c >> 4)
  120. {
  121. case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
  122. // 0xxxxxxx
  123. out += str.charAt(i-1);
  124. break;
  125. case 12: case 13:
  126. // 110x xxxx 10xx xxxx
  127. char2 = str.charCodeAt(i++);
  128. out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
  129. break;
  130. case 14:
  131. // 1110 xxxx 10xx xxxx 10xx xxxx
  132. char2 = str.charCodeAt(i++);
  133. char3 = str.charCodeAt(i++);
  134. out += String.fromCharCode(((c & 0x0F) << 12) |
  135. ((char2 & 0x3F) << 6) |
  136. ((char3 & 0x3F) << 0));
  137. break;
  138. }
  139. }
  140. return out;
  141. }
  142. function CharToHex(str) {
  143. var out, i, len, c, h;
  144. out = "";
  145. len = str.length;
  146. i = 0;
  147. while(i < len)
  148. {
  149. c = str.charCodeAt(i++);
  150. h = c.toString(16);
  151. if(h.length < 2)
  152. h = "0" + h;
  153. out += "\\x" + h + " ";
  154. if(i > 0 && i % 8 == 0)
  155. out += "\r\n";
  156. }
  157. return out;
  158. }
  159. function doEncode() {
  160. var src = document.getElementById('src').value;
  161. document.getElementById('dest').value = base64encode(utf16to8(src));
  162. }
  163. function doDecode() {
  164. var src = document.getElementById('src').value;
  165. var opts = document.getElementById('opt');
  166. if(opts.checked)
  167. {
  168. document.getElementById('dest').value = CharToHex(base64decode(src));
  169. }
  170. else
  171. {
  172. document.getElementById('dest').value = utf8to16(base64decode(src));
  173. }
  174. }
  175. </script>
  176. </head>
  177. <body>
  178. <form id="form1" name="form1" method="post" action="">
  179. <p>请输入要进行编码或解码的字符:</p>
  180. <textarea name="src" id="src" cols="80" rows="6" style="width:99%;height:120px;"></textarea>
  181. <input onclick="doEncode();" type="button" value="编码" name="encode" />
  182. <input onclick="doDecode();" type="button" value="解码" name="decode" />
  183. <label><input type="checkbox" value="hex" name="opt" id="opt" /> 解码结果以16进制显示</label>
  184. </p>
  185. <p>Base64编码或解码结果:</p>
  186. <textarea name="dest" id="dest" cols="80" rows="6" style="width:99%;height:120px;"></textarea>
  187. </form>
  188. </body>
  189. </html>