在浏览器的控制台中输入下面一句JS代码,即可显示当前页面所有元素的边框
[].forEach.call($$('*'), function(a) {
a.style.border = "1px solid #" + (~~(Math.random()*(1<<24))).toString(16);
});
代码解析
1.选取所有元素
$$('*')
等价于 document.querySelectorAll('*')
2.改变边框的颜色
a.style.border="1px solid #" + color
这个不难理解,往下看
(~~(Math.random()*(1<<24))).toString(16);
使用数字类型的 toString 方法进行十进制到16进制的转换
(16).toString(); // "16"
(16).toString(10); // "16"
(16).toString(16); // "10" 16进制
(16).toString(8); // "20" 八进制
(16).toString(2); // "10000" 二进制
(16).toString(36); // "g" 36 是最大允许的进制
1<<24
这就需要了解下按位操作符了,
| 左移(Left shift) | a << b
| 将 a
的二进制形式向左移 b
(< 32) 比特位,右边用0填充。
比如:
1 << 2 // 相当于二进制 1 向左移动两位得到 100,再转换为十进制 4
2 << 1 // 相当于二进制 10 向左移动两位得到 100,再转换为十进制 4
Math.random()*(1<<24)
可以得到一个 0 到 16777216 之间的值
“~” 操作符(按位取反操作)。
~~
两次取返就可以得到纯整数部,相当于 parseInt 的简写
var a = 15.34, // ~~a = 15
b = -5343.3436,// ~~b = -5343
c = 3443.53547; // ~~c = 3443
~~a == parseInt(a, 10); // true
~~b == parseInt(b); // true
~~c == parseInt(c); // true
最后转换为一个16进制 0 到 16777216 之间的数值
网友评论