找回密码
 立即注册→加入我们

QQ登录

只需一步,快速开始

搜索
热搜: 下载 VB C 实现 编写
查看: 2678|回复: 2

【JS】字符串打乱效果

[复制链接]

1109

主题

1649

回帖

7万

积分

用户组: 管理员

一只技术宅

UID
1
精华
244
威望
743 点
宅币
24180 个
贡献
46222 次
宅之契约
0 份
在线时间
2294 小时
注册时间
2014-1-26
发表于 2018-3-20 13:58:33 | 显示全部楼层 |阅读模式

欢迎访问技术宅的结界,请注册或者登录吧。

您需要 登录 才可以下载或查看,没有账号?立即注册→加入我们

×
参考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.         styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsResult.push(this))}";
  9.         window.scrollBy(0, 0);
  10.         head.removeChild(styleTag);

  11.         var result = [];
  12.         for (var i in document.__qsResult)
  13.             result.push(document.__qsResult[i]);
  14.         return result;
  15.     };

  16. function randomString(count)
  17. {
  18.         var str="";
  19.         var characters = "!@#$%^&*0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
  20.         while(count--)
  21.                 str = str + characters[Math.floor(characters.length * Math.random())];
  22.         return str;
  23. }

  24. function obfuscateChildren(elm)
  25. {
  26.         for(var i = 0; i < elm.childNodes.length; i++)
  27.         {
  28.                 if(!!elm.childNodes[i].nodeValue)
  29.                 {
  30.                         elm.childNodes[i].nodeValue = randomString(elm.childNodes[i].nodeValue.length);
  31.                 }
  32.         }
  33.         for(var i = 0; i < elm.children.length; i++)
  34.         {
  35.                 obfuscateChildren(elm.children[i]);
  36.         }
  37. }

  38. function updateObfuscated()
  39. {
  40.         var elms = document.querySelectorAll("[class='obfuscated']");
  41.         for(var i = 0; i < elms.length; i++)
  42.         {
  43.                 obfuscateChildren(elms[i]);
  44.         }
  45. }

  46. setTimeout(updateObfuscated, 0);
  47. 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


回复

使用道具 举报

1109

主题

1649

回帖

7万

积分

用户组: 管理员

一只技术宅

UID
1
精华
244
威望
743 点
宅币
24180 个
贡献
46222 次
宅之契约
0 份
在线时间
2294 小时
注册时间
2014-1-26
 楼主| 发表于 2018-3-20 16:06:26 | 显示全部楼层
实测……iOS上的chrome没有效果……不知道为啥
回复 赞! 靠!

使用道具 举报

0

主题

27

回帖

272

积分

用户组: 中·技术宅

UID
4725
精华
0
威望
2 点
宅币
241 个
贡献
0 次
宅之契约
0 份
在线时间
38 小时
注册时间
2019-3-2
发表于 2019-8-2 17:02:26 | 显示全部楼层
看到一些帖子上某部分的文字动来动去的,我还以为我的设备上的chrome出问题了呢。。。。真相了。。。
回复 赞! 靠!

使用道具 举报

QQ|Archiver|小黑屋|技术宅的结界 ( 滇ICP备16008837号 )|网站地图

GMT+8, 2024-3-28 21:46 , Processed in 0.043360 second(s), 32 queries , Gzip On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表