js如何利用二进制巧妙的产生随机的16进制颜色

"#"+(~~(Math.random()*(1<<24))).toString(16);

 分析：

• 首先Math.random()和toString()函数就不用多讲了，相信大家都懂的
• 1<<24
  二进制中的位运算，将1左移24，也就相当于1乘以2的24次方，这不就是16进制颜色最大值吗(F转换为二进制为1111);
• ~~
  这个又是什么东东呢，它是二进制里面的非运算，也就是按位取反操作，一个~表示取反，那么两个~当然就表示它自己了，有人可能会问这不是多此一举吗，那你就大错特错了，在js的二进制世界里，位操作符并不直接操作64位的值，而是先将64位的值转换为32位的整数，然后再执行操作，这样就很明白了，如果产生了随机的二进制小数，那么一旦遇到位操作符它就会转换为整数，这样就避免了会产生类似这样比较搞笑的结果：#b791d0.34201e
  

最后，做个小例子吧

function demo(n){
		var i=1;
		for(;i<=n;i++){
			var color="#"+(~~(Math.random()*(1<<24))).toString(16);
			var span=document.createElement('span');
			span.innerHTML=i<10?"0"+i+"  ":i+"  ";
			span.style.color=color;
			document.body.appendChild(span);
			if (i%10==0) {document.write('<br/>')}
		}
	}
	demo(100);

 

有兴趣的小伙伴可以自己去测试一下，但是需要注意一点：二进制在浏览器上貌似是以补码的形式输出的。正数的补码是它本身，负数的补码是它的反码加1。