javascript中获取随机颜色值

使用javascript获取随机颜色值的方法多种多样,今天无意中看见一种方法,使用了闭包,不太好理解,在此记录说明一下,先贴代码:

function getRandomColor() {
    return "#" + (function(h) {
        return new Array(7 - h.length).join("0") + h;
    })((Math.random() * 0x1000000 << 0).toString(16))
}
解析这段代码首先要明白 0x1000000 的含义。我们都知道,颜色值位于范围 0x000000 - 0xffffff 的一个十六进制数字,Math.random() 生成的是一个 0 - 1 之间的小数,而 0x1000000 = 0xffffff + 1, 而 Math.random() * 0x1000000 在计算时会被自动换算为十进制运算,所以 Math.random() * 0x1000000 就表示一个位于颜色值取值范围内的十六进制数字所对应的十进制数字。这里有点绕口,意思是说 Math.random() * 0x1000000 得到的是一个十进制的数字,这个数字换算成十六进制以后,是位于0x000000 - 0xffffff之间的。


当然它有可能是小数,而颜色值不能是小数,所以需要通过位移运算符 <<0 (也可以使用>>0),不论是向左移动0位还是向右移动0位,最后的结果均等于原来数值的整数部分,这样就能得到一个十进制整数,而这个整数对应的十六进制数值是位于0x000000 - 0xffffff之间的。

将上面的结果通过toString(16)方法,转换为16进制数值。

这样还不行,因为这样得到的一个数值长度很可能不到6位,而颜色值都是六位长度。那么针对少于六位长度的情况,我们通常都是将其高位补0。于是我们把这个上面得到的结果作为参数传入里面的匿名函数中进一步处理(即参数h)。

在匿名函数中,new Array(7 - h.length) 将得到一个数据全部为undefined的数组,数组长度为 7 - h.length,通过调用数组的join("0")方法,将数组中各个数据以0的方式拼接成为字符串,由于数组中数据均为undefined,所以拼接之后的字符串只包括字符0,而0的个数等于数组长度-1,所以这里是7-h.length,而不是6-h.length。

最后将需要补的0拼接到十六进制随机数之前,在加上颜色标识符#,就能得到一个随机颜色值。



标签: javascript

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.jsunw.com/?post=6

相关推荐

你肿么看?

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。