- 第28天 (2022-10-18)
- [html] 说说你对
<meta>
标签的理解 - [css] rgba()和opacity这两个的透明效果有什么区别呢?
- [js] 解释下这段代码的意思!
- [软技能] 在浏览器中输入url到页面显示出来的过程发生了什么?
- [html] 说说你对
JS:
作用
在你的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))
}
)