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