一句话显示页面元素边框

同一个页面效果，所有前端的开发人员都能实现。但是如何判定谁做的好，往往只能查看源码进行进一步的确定。其实，还可以采用另一种策略来初步的判定页面布局合理性。方法就是给页面的每个元素都加上边框，通过边框来确定元素的布局、位置、大小等是否合理。

在浏览器的控制台中输入下面一句JS代码，即可显示当前页面所有元素的边框：

[].forEach.call($$('*'), function(a) {
    a.style.outline = "1px solid #" + (~~(Math.random()*(1<<24))).toString(16);
});

代码说明

1 选取所有元素

$$('*') 等价于 document.querySelectorAll('*')

2 改变元素边框颜色

让元素有一个漂亮的边框，这行代码使用了CSS的outline属性。有一点你可能不知道，在CSS渲染的盒子模型（Box Model）中，outline并不会改变元素及其布局的位置。因此这比使用border属性要好得多，所以这一部分其实并不难理解。$$和$选择器的历史

a.style.outline="1px solid #" + color

怎样定义颜色值其实是比较有意思的

~~(Math.random()*(1<<24))).toString(16)

我们想构造的其实是一个16进制的颜色值，像白色 FFFFFF，蓝色 0000FF 等等。

首先我们学到了可以使用数字类型的 toString 方法进行十进制到16进制的转换。

其实你可以用它进行任意进制的转换

(30).toString();   // "30"
(30).toString(10); // "30"
(30).toString(16); // "1e" 16进制
(30).toString(2); // "11110" 二进制
(30).toString(36); // "u" 36 是最大允许的进制

因此16进制中的 ffffff其实是 parseInt("ffffff", 16) == 16777215，16777215是2^24 - 1 的值

因此左位移操作乖以一个随机数 Math.random()*(1<<24) 可以得到一个 0 到 16777216 之间的值

但是还不够，Math.random 返回的是一个浮点数字，我们只需要整数部，这里使用了 “~” 操作符（按位取反操作）。

这行代码并不关心正负值。因此通过两次取返就可以得到纯整数部，我们还可以将 ~~ 视为 parseInt 的简写：

var a = 12.34, // ~~a = 12
    b = -1231.8754, // ~~b = -1231
    c = 3213.000001; // ~~c = 3213
 
~~a == parseInt(a, 10); // true
~~b == parseInt(b, 10); // true
~~c == parseInt(c, 10); // true

如果你仔细看评论你会知道使用 按位或 "|" 操作符也可以得到相同的结果。

~~a == 0|a == parseInt(a, 10)
~~b == 0|b == parseInt(b, 10)
~~c == 0|c == parseInt(c, 10)

我们最终得到了一个 0 到 16777216之间的随机数，然后使用 toString(16) 转换成16进制，它就是这样工作的。