技术宅的结界

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

QQ登录

只需一步,快速开始

搜索
热搜: 下载 VB C 实现 编写
查看: 274|回复: 1
收起左侧

【JS】字符串打乱效果

[复制链接]

1010

主题

2246

帖子

5万

积分

用户组: 管理员

一只技术宅

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

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

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

x
参考Minecraft的§k效果。



如何把它应用到网页上呢?
1、我们定义一个新的样式,名字叫“obfuscated”。
[CSS] 纯文本查看 复制代码
.obfuscated
{
  display: inline
}
因为不想让打乱的字符串换行,所以用display: inline了。

2、写JS。
[JavaScript] 纯文本查看 复制代码
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[i]);
        return result;
    };

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

function obfuscateChildren(elm)
{
	for(var i = 0; i < elm.childNodes.length; i++)
	{
		if(!!elm.childNodes[i].nodeValue)
		{
			elm.childNodes[i].nodeValue = randomString(elm.childNodes[i].nodeValue.length);
		}
	}
	for(var i = 0; i < elm.children.length; i++)
	{
		obfuscateChildren(elm.children[i]);
	}
}

function updateObfuscated()
{
	var elms = document.querySelectorAll("[class='obfuscated']");
	for(var i = 0; i < elms.length; i++)
	{
		obfuscateChildren(elms[i]);
	}
}

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都会被支持。

所以如果我这样写的话:
[HTML] 纯文本查看 复制代码
<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


1010

主题

2246

帖子

5万

积分

用户组: 管理员

一只技术宅

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

本版积分规则

QQ|申请友链|Archiver|手机版|小黑屋|技术宅的结界 ( 滇ICP备16008837号|网站地图

GMT+8, 2018-12-15 10:59 , Processed in 0.095403 second(s), 38 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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