JS实现“形式”上的 “加密 解密”
这里的加密解密并不是真正的加密解密，而是通过一系列的判断与转化让输入的数据转化成另外一种形式，最后在转换回来
这里和我上一篇的 JS实现 字符、十进制数字、 二进制、之间的相互转化 部分代码相同，通过本这个例子可以学习 字符、十进制数字、之间的相互转化，
也可以复习一些 数组 方面小方法
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>加密</title>
8 <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
9 <style media="screen">
10 .encryption{
11 margin: 20px;
12 }
13 .div1,.div2,.div3,.div4{
14 float: left;
15 }
16 .div4{
17 margin-left: 40px;
18 }
19 .div2{
20 width: 250px;
21 height: 150px;
22 border: 1px solid #ccc;
23 margin: 40px 20px;
24 }
25 .div2 input{
26 margin:10px 20px;
27 float: left;
28 }
29 </style>
30 </head>
31 <body>
32 <div class="encryption">
33 <div class="div1">
34 <h5>明文：</h5>
35 <textarea class="clear" name="mingwen" rows="8" cols="30"></textarea>
36 </div>
37 <div class="div2">
38 <p>密钥：</p>
39 <input type="text" class="mikey" value=""><br/>
40 <input type="button" class="addkey" value="加密"><br/>
41 <input type="button" class="releasekey" value="解密">
42 </div>
43 <div class="div3">
44 <h5>密文：</h5>
45 <textarea class="cipher" name="miwen" rows="8" cols="30"></textarea>
46 </div>
47 <div class="div4">
48 <h5>明文：</h5>
49 <textarea class="seelook" name="migwen" rows="8" cols="30"></textarea>
50 </div>
51 </div>
52
53
54 <script type="text/javascript" src="js/jquery.min.js"></script>
55 <script type="text/javascript" src="js/bootstrap.min.js"></script>
56 <script type="text/javascript">
57 window.onload=function() {
58 $('.addkey').click(function(){
59 changeMig($('.clear').val(),$('.cipher'));
60 });
61
62 $('.releasekey').click(function(){
63 changeMig($('.cipher').val(),$('.seelook'));
64 });
65
66 function changeMig(par,conf){
67 //var mingwen=$('.clear').val();
68 //var cipher=$('.cipher').val();
69 //获取密钥的值
70 var mikey=$('.mikey').val();
71 var num=parseInt(mikey);
72 var addnum=-5;
73 //var reg=/((?=[\x21-\x7e]+)[^0-9])/;
74 //正则匹配数字
75 var reg=/[0-9]/;
76 if (par==$('.cipher').val()) {
77 num=-num;
78 console.log(num);
79 addnum=5
80 }
81 if (!reg.test(par)) { //当输入的明文中不含数字时进行加密
82 var str=par.split(''); //对输入的明文进行字符串分割
83 var newArr=[];
84 for (var i = 0; i < str.length; i++) {
85 var code = str[i].charCodeAt(); //将分割的每个字符进行ASCII转码为数字
86 console.log(code);
87 if (code>=65&&code<=96||code>=97&&code<=122) {
88 if (code+num>=65&&code+num<=96||code+num>=97&&code+num<=122) {
89 //当输入的为字母，且没有超过范围时，直接相加/相减，再转码即可
90 newArr.push(String.fromCharCode(code+num));
91 }else{
92 //当输入的为字母，且相加超过范围时，则减去/加上一个数，再转码即可
93 newArr.push(String.fromCharCode(code+num+addnum));
94 }
95 }else{
96 //当为非字母的字符时，直接相加/相减即可
97 newArr.push(String.fromCharCode(code+num));
98 console.log(String.fromCharCode(code+num))
99 }
100 }
101 var newStr = newArr.join(''); //将数字转为字符串
102 conf.val(newStr);
103 }else{
104 alert("请输入非数字的字符");
105 }
106 }
107 }
108 </script>
109 </body>
110 </html>
