【JS】字符串打乱效果
参考Minecraft的§k效果。https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/7/7e/Minecraft_Formatting.gif?version=5dde966c0ba0ea401bb2d22b831d3ea1
如何把它应用到网页上呢？
1、我们定义一个新的样式，名字叫“obfuscated”。.obfuscated
{
display: inline
}因为不想让打乱的字符串换行，所以用display: inline了。
2、写JS。if(!document.querySelectorAll)
document.querySelectorAll = function(selector)
{
var head = document.documentElement.firstChild;
var styleTag = document.createElement("STYLE");
head.appendChild(styleTag);
document.__qsResult = [];
styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsResult.push(this))}";
window.scrollBy(0, 0);
head.removeChild(styleTag);
var result = [];
for (var i in document.__qsResult)
result.push(document.__qsResult);
return result;
};
function randomString(count)
{
var str="";
var characters = "!@#$%^&*0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
while(count--)
str = str + characters;
return str;
}
function obfuscateChildren(elm)
{
for(var i = 0; i < elm.childNodes.length; i++)
{
if(!!elm.childNodes.nodeValue)
{
elm.childNodes.nodeValue = randomString(elm.childNodes.nodeValue.length);
}
}
for(var i = 0; i < elm.children.length; i++)
{
obfuscateChildren(elm.children);
}
}
function updateObfuscated()
{
var elms = document.querySelectorAll("");
for(var i = 0; i < elms.length; i++)
{
obfuscateChildren(elms);
}
}
setTimeout(updateObfuscated, 0);
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都会被支持。
所以如果我这样写的话：<font face="宋体">
<div class="obfuscated">aa<u>bb<b>cc<i>dd</i>ee</b>ff</u>gg</div><br>
<div class="obfuscated">aaa</div><br>
<div class="obfuscated">aa</div><br>
<div class="obfuscated">a</div><br>
</font>那么效果看起来应该是这样的：
aabbccddeeffgg
aaa
aa
a
实测……iOS上的chrome没有效果……不知道为啥
看到一些帖子上某部分的文字动来动去的，我还以为我的设备上的chrome出问题了呢。。。。真相了。。。
页:
[1]