【JS】字符串打乱效果

0xAA55

参考Minecraft的§k效果。



如何把它应用到网页上呢？
1、我们定义一个新的样式，名字叫“obfuscated”。

1. .obfuscated
   
2. {
   
3.   display: inline
   
4. }

复制代码

因为不想让打乱的字符串换行，所以用display: inline了。

2、写JS。

1. if(!document.querySelectorAll)
   
2.     document.querySelectorAll = function(selector)
   
3.     {
   
4.         var head = document.documentElement.firstChild;
   
5.         var styleTag = document.createElement("STYLE");
   
6.         head.appendChild(styleTag);
   
7.         document.__qsResult = [];
   
8. 
   
9.         styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsResult.push(this))}";
   
10.         window.scrollBy(0, 0);
    
11.         head.removeChild(styleTag);
    
12. 
    
13.         var result = [];
    
14.         for (var i in document.__qsResult)
    
15.             result.push(document.__qsResult[i]);
    
16.         return result;
    
17.     };
    
18. 
    
19. function randomString(count)
    
20. {
    
21.         var str="";
    
22.         var characters = "!@#$%^&*0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    
23.         while(count--)
    
24.                 str = str + characters[Math.floor(characters.length * Math.random())];
    
25.         return str;
    
26. }
    
27. 
    
28. function obfuscateChildren(elm)
    
29. {
    
30.         for(var i = 0; i < elm.childNodes.length; i++)
    
31.         {
    
32.                 if(!!elm.childNodes[i].nodeValue)
    
33.                 {
    
34.                         elm.childNodes[i].nodeValue = randomString(elm.childNodes[i].nodeValue.length);
    
35.                 }
    
36.         }
    
37.         for(var i = 0; i < elm.children.length; i++)
    
38.         {
    
39.                 obfuscateChildren(elm.children[i]);
    
40.         }
    
41. }
    
42. 
    
43. function updateObfuscated()
    
44. {
    
45.         var elms = document.querySelectorAll("[class='obfuscated']");
    
46.         for(var i = 0; i < elms.length; i++)
    
47.         {
    
48.                 obfuscateChildren(elms[i]);
    
49.         }
    
50. }
    
51. 
    
52. setTimeout(updateObfuscated, 0);
    
53. setInterval(updateObfuscated, 15);

复制代码

这份JS兼容IE8以上的IE，以及Chrome。别的浏览器没试过，但目测是兼容的。许多浏览器限定的语法都没使用。此外，这份代码不依赖jQuery。

IE8不支持document.querySelectorAll，所以自己实现了一个。
它会遍历一个元素的所有的子节点，这样就兼容比如<i>、<u>、<b>、<font>等的格式标签了。

因为它是每15毫秒更新一次，所以要考虑到客户机器的性能，不能对过长的字符串进行这样的处理。这个数值可以改成30。之所以设置为15，是因为屏幕刷新率是60Hz，大约16.667毫秒一次刷新。设置为30相当于把这个数值翻倍——也就是30Hz的刷新率。

所有class为“obfuscated”的div都会被支持。

所以如果我这样写的话：

1. <font face="宋体">
   
2. <div class="obfuscated">aa<u>bb<b>cc<i>dd</i>ee</b>ff</u>gg</div><br>
   
3. <div class="obfuscated">aaa</div><br>
   
4. <div class="obfuscated">aa</div><br>
   
5. <div class="obfuscated">a</div><br>
   
6. </font>

复制代码

那么效果看起来应该是这样的：

aabbccddeeffgg

aaa

aa

a

0xAA55

实测……iOS上的chrome没有效果……不知道为啥

小冰

看到一些帖子上某部分的文字动来动去的，我还以为我的设备上的chrome出问题了呢。。。。真相了。。。