html怎么随机设置颜色,设置随机颜色值

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

表达式：

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

分步解析

各种表达式解释：

Math.floor()

向下取整，可以理解为取浮点数的整数位；

相似的用法：

Math.ceil() 向上取整；Math.round() 四舍五入

Math.random()

生成随机数，范围(0-1)，在后面乘几(n)，代表取该范围(0-->n)的随机数

2<<23

<

toString(16)

生成16进制的字符串；

具体解释

Math.random()*(2<<23)

取0-(2<<23)之间的随机数，即取十进制(0-16777216)之间的随机数

(之所以这样设置，是因为16进制数ffffff的十进制表示方式为16777215)

Math.floor(Math.random()*(2<<23))

对生成的随机数向下取整，即保留随机数的整数部分

.toString(16)

把生成的随机数(十进制)转换为16进制，并转换为数组

可视化结果

var random=Math.random(); //生成随机数：0.32273213103830223

var demo= (2<<23); //十进制数：16777216

var list=random*demo; //生成代表颜色的随机数：5414546.672569901

var num=Math.floor(list); //向下取整：5414546

document.write(num.toString(16)) //生成随机颜色：529e92

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

具体应用

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

以下是代码：

晃瞎你双眼

var randomColor, randomHeight, randomWidth;

function changeTrangel () {

//生成随机颜色

randomColor = '#'+Math.floor(Math.random()*(2<<23)).toString(16);

//生成随机高度

randomHeight = Math.floor(Math.random()*($(".container").height()))+200+'px';

//生成随机宽度

randomWidth = Math.floor(Math.random()*($(".container").width()))+500+'px';

$(".box1")

.css("background-color",randomColor)

.css("height",randomHeight)

.css("width",randomWidth);

$(".colorholder").text(randomColor)

}

var int=self.setInterval("changeTrangel()",100);

function startChange () {

window.location.reload();

}

function stopChange () {

int=window.clearInterval(int)

}

.container{

margin: 30px;

width: 80%;

}

看看你的幸运颜色

开始

停止

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

未完待续