一句话给所有元素边框

在浏览器的控制台中输入下面一句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 之间的数值