JS里charCodeAt()和fromCharCode()方法拓展应用：加密与解密-js教程-PHP中文网

JS实现客户端的网页加密解密技术，可用作选择性隐蔽展示。当然客户端的加密安全度是不能与服务器相提并论，肯定不能用于密码这类内容的加密，但对于一般级别的内容用作展示已经够了。
JS加密与解密的解决方案有很多，本文则利用String对象的charCodeAt()方法和fromCharCode()方法对字符的ASCII编码进行获取和修改。
加密,解密代码：
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> 
<span style="color: #008080;"> 6</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>网页加密及解密<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="xiongzaiqiren"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 8</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keywords"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 9</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;">10</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="generator"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ClassBao team coding in July 10, 2017"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;">11</span> 
<span style="color: #008080;">12</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">13</span> 
<span style="color: #008080;">14</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">15</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">textarea </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="text1"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="textfield"</span><span style="color: #ff0000;"> cols</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> rows</span><span style="color: #0000ff;">="5"</span><span style="color: #0000ff;">></span>钱庄王员外这个人怎么样?<span style="color: #0000ff;"></</span><span style="color: #800000;">textarea</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="Button1"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="加密"</span><span style="color: #ff0000;"> onClick</span><span style="color: #0000ff;">="text1.value = MySign.Encrypt(text1.value);"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">17</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="Button2"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="解密"</span><span style="color: #ff0000;"> onClick</span><span style="color: #0000ff;">="text1.value = MySign.UnEncrypt(text1.value);"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">18</span> 
<span style="color: #008080;">19</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">language</span><span style="color: #0000ff;">="JavaScript"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">20</span>         <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> MySign </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> {
</span><span style="color: #008080;">21</span>             <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">加密/解密次数</span>
<span style="color: #008080;">22</span> <span style="background-color: #f5f5f5; color: #000000;">            num: </span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">,
</span><span style="color: #008080;">23</span>             <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">加密</span>
<span style="color: #008080;">24</span> <span style="background-color: #f5f5f5; color: #000000;">            Encrypt: </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> (Text) {
</span><span style="color: #008080;">25</span>                 <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">;
</span><span style="color: #008080;">26</span> <span style="background-color: #f5f5f5; color: #000000;">                output </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> String;
</span><span style="color: #008080;">27</span> <span style="background-color: #f5f5f5; color: #000000;">                alterText </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Array();
</span><span style="color: #008080;">28</span> <span style="background-color: #f5f5f5; color: #000000;">                varCost </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Array();
</span><span style="color: #008080;">29</span> <span style="background-color: #f5f5f5; color: #000000;">                TextSize </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.length;
</span><span style="color: #008080;">30</span>                 <span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;"> (i </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; i </span><span style="background-color: #f5f5f5; color: #000000;"><</span><span style="background-color: #f5f5f5; color: #000000;"> TextSize; i</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">31</span> <span style="background-color: #f5f5f5; color: #000000;">                    idea </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Math.round(Math.random() </span><span style="background-color: #f5f5f5; color: #000000;">*</span> <span style="background-color: #f5f5f5; color: #000000;">111</span><span style="background-color: #f5f5f5; color: #000000;">) </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">77</span><span style="background-color: #f5f5f5; color: #000000;">;
</span><span style="color: #008080;">32</span> <span style="background-color: #f5f5f5; color: #000000;">                    alterText[i] </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.charCodeAt(i) </span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;"> idea;
</span><span style="color: #008080;">33</span> <span style="background-color: #f5f5f5; color: #000000;">                    varCost[i] </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> idea;
</span><span style="color: #008080;">34</span> <span style="background-color: #f5f5f5; color: #000000;">                }
</span><span style="color: #008080;">35</span>                 <span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;"> (i </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; i </span><span style="background-color: #f5f5f5; color: #000000;"><</span><span style="background-color: #f5f5f5; color: #000000;"> TextSize; i</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">36</span> <span style="background-color: #f5f5f5; color: #000000;">                    output </span><span style="background-color: #f5f5f5; color: #000000;">+=</span><span style="background-color: #f5f5f5; color: #000000;"> String.fromCharCode(alterText[i], varCost[i]);
</span><span style="color: #008080;">37</span> <span style="background-color: #f5f5f5; color: #000000;">                }
</span><span style="color: #008080;">38</span>                 <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">text1.value = output;</span>
<span style="color: #008080;">39</span>                 <span style="background-color: #f5f5f5; color: #0000ff;">return</span><span style="background-color: #f5f5f5; color: #000000;"> output;
</span><span style="color: #008080;">40</span> <span style="background-color: #f5f5f5; color: #000000;">            },
</span><span style="color: #008080;">41</span> 
<span style="color: #008080;">42</span>             <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">解密</span>
<span style="color: #008080;">43</span> <span style="background-color: #f5f5f5; color: #000000;">            UnEncrypt: </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> (Text) {
</span><span style="color: #008080;">44</span>                 <span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (</span><span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">></span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">45</span>                     <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">-</span> <span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">;
</span><span style="color: #008080;">46</span> <span style="background-color: #f5f5f5; color: #000000;">                    output </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> String;
</span><span style="color: #008080;">47</span> <span style="background-color: #f5f5f5; color: #000000;">                    alterText1 </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Array();
</span><span style="color: #008080;">48</span> <span style="background-color: #f5f5f5; color: #000000;">                    varCost1 </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Array();
</span><span style="color: #008080;">49</span> <span style="background-color: #f5f5f5; color: #000000;">                    TextSize </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.length;
</span><span style="color: #008080;">50</span>                     <span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;"> (i </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; i </span><span style="background-color: #f5f5f5; color: #000000;"><</span><span style="background-color: #f5f5f5; color: #000000;"> TextSize; i</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">51</span> <span style="background-color: #f5f5f5; color: #000000;">                        alterText[i] </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.charCodeAt(i);
</span><span style="color: #008080;">52</span> <span style="background-color: #f5f5f5; color: #000000;">                        varCost[i] </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.charCodeAt(i </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">);
</span><span style="color: #008080;">53</span> <span style="background-color: #f5f5f5; color: #000000;">                    }
</span><span style="color: #008080;">54</span>                     <span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;"> (i </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; i </span><span style="background-color: #f5f5f5; color: #000000;"><</span><span style="background-color: #f5f5f5; color: #000000;"> TextSize; i </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> i </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">2</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">55</span> <span style="background-color: #f5f5f5; color: #000000;">                        output </span><span style="background-color: #f5f5f5; color: #000000;">+=</span><span style="background-color: #f5f5f5; color: #000000;"> String.fromCharCode(alterText[i] </span><span style="background-color: #f5f5f5; color: #000000;">-</span><span style="background-color: #f5f5f5; color: #000000;"> varCost[i]);
</span><span style="color: #008080;">56</span> <span style="background-color: #f5f5f5; color: #000000;">                    }
</span><span style="color: #008080;">57</span>                     <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">text1.value = output;</span>
<span style="color: #008080;">58</span>                     <span style="background-color: #f5f5f5; color: #0000ff;">return</span><span style="background-color: #f5f5f5; color: #000000;"> output;
</span><span style="color: #008080;">59</span> <span style="background-color: #f5f5f5; color: #000000;">                }
</span><span style="color: #008080;">60</span> <span style="background-color: #f5f5f5; color: #000000;">            }
</span><span style="color: #008080;">61</span> <span style="background-color: #f5f5f5; color: #000000;">        };
</span><span style="color: #008080;">62</span> 
<span style="color: #008080;">63</span> 
<span style="color: #008080;">64</span>         <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">测试代码</span>
<span style="color: #008080;">65</span>         <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> testString </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">光头强，还不去砍树？</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">;
</span><span style="color: #008080;">66</span> <span style="background-color: #f5f5f5; color: #000000;">        console.log(testString);
</span><span style="color: #008080;">67</span> 
<span style="color: #008080;">68</span>         <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> sign </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> MySign.Encrypt(testString); </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">凑妣o忕ｧ[還¬什³呯´硠S桲aﾁb</span>
<span style="color: #008080;">69</span>         <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> sign2 </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> MySign.UnEncrypt(sign); </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">光头强，还不去砍树？</span>
<span style="color: #008080;">70</span> 
<span style="color: #008080;">71</span> <span style="background-color: #f5f5f5; color: #000000;">        console.log(sign);
</span><span style="color: #008080;">72</span> <span style="background-color: #f5f5f5; color: #000000;">        console.log(sign2);
</span><span style="color: #008080;">73</span> 
<span style="color: #008080;">74</span>     <span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">75</span> 
<span style="color: #008080;">76</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">77</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
登录后复制
以上是JS里charCodeAt()和fromCharCode()方法拓展应用：加密与解密的详细内容。更多信息请关注PHP中文网其他相关文章！