解释下这段代码的意思!
[].forEach.call($$("*"), function(a) {
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})
从一行代码里面学点JavaScript - L3ve的绝对领域 - OSCHINA - 中文开源技术交流社区
在你的Chrome浏览器的控制台中输入这段代码,你会发现不同HTML层都被使用不同的颜色添加了一个高亮的边框。
是不是非常酷?但是,简单来说,这段代码只是首先获取了所有的页面元素,然后使用一个不同的颜色为它们添加了一个1px的边框。
解析:
[].forEach.call()
=> 调用引用数组的forEach方法$$('*')
=>document.querySelectorAll('*')
~~a
=>parseInt(a)
1<<24
=> 对二进数1小数点右移24位(parseInt(Math.random()*(1<<24)).toString(16))
=> 获得了一个位于0-16777216
之间的随机整数,也就是随机颜色,再使用toString(16)
将它转化为十六进制数。
手写简版
[].forEach.call(
document.querySelectorAll('*'),
function(a){
a.style.outline="1px solid #" +
(parseInt(Math.random()*(1<<24)).toString(16))
}
)
// $$('*') 为获取所有 dom 元素,返回数组
[].forEach.call($$("*"), function(a) {
// forEach 的回调函数,这里的 a 是数组中每个 dom 元素,不是 a 标签
a.style.outline =
// ~~是取整 1<<24 是位运算 结果为 16777216
// 之后的 toString(16) 为进行 16 进制的转换 即颜色
"1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});