设置随机颜色值

分享一个为div设置随机颜色的小trick，来自于知乎。

表达式：

Math.floor(Math.random()*(2<<23)).toString(16);

分步解析

各种表达式解释：

1. Math.floor()
   向下取整，可以理解为取浮点数的整数位；
   相似的用法：
   Math.ceil() 向上取整；Math.round() 四舍五入
2. Math.random()
   生成随机数，范围（0-1），在后面乘几(n)，代表取该范围(0-->n)的随机数
3. 2<<23
   <<左移运算符，此操作将2进制10变为1000...00，即左移23位；
4. toString(16)
   生成16进制的字符串；

具体解释

1. Math.random()*(2<<23)
   取0-(2<<23)之间的随机数，即取十进制（0-16777216）之间的随机数
   （之所以这样设置，是因为16进制数ffffff的十进制表示方式为16777215）
2. Math.floor(Math.random()*(2<<23))
   对生成的随机数向下取整，即保留随机数的整数部分
3. .toString(16)
   把生成的随机数（十进制）转换为16进制，并转换为数组

可视化结果

通过上述做法，达到了生成随机颜色值的效果。如此，可以画很多有趣的图形了。

具体应用

比如说，现在要做一个“挑选幸运色（晃瞎你双眼）”的页面，利用颜色值随机数可以完成。
以下是代码：

    
    
    
    


看看你的幸运颜色
开始
停止


    

    

这里边的核心功能在于，通过random函数来生成随机颜色并通过停止按钮来选择幸运色；当然，设置随机高宽是为了晃瞎双眼。

运行效果见：https://github.com/cyuamber/randomcolor

未完待续