分享一个为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
<<左移运算符，此操作将2进制10变为1000...00，即左移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进制，并转换为数组
可视化结果
<html>
<body>
<script type="text/javascript">
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
</script>
</body>
</html>
通过上述做法，达到了生成随机颜色值的效果。如此，可以画很多有趣的图形了。
具体应用
比如说，现在要做一个“挑选幸运色（晃瞎你双眼）”的页面，利用颜色值随机数可以完成。
以下是代码：
<!DOCTYPE html>
<html>
<head>
<title>晃瞎你双眼</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
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)
}
</script>
<style type="text/css">
.container{
margin: 30px;
width: 80%;
}
</style>
</head>
<body>
<h1>看看你的幸运颜色</h1>
<button class='button' id="buttonstart" onclick="startChange()">开始</button>
<button class='button' id="buttonstop" onclick="stopChange()" >停止</button>
<h2 class="colorholder"></h2>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
</body>
</html>
这里边的核心功能在于，通过random函数来生成随机颜色并通过停止按钮来选择幸运色；当然，设置随机高宽是为了晃瞎双眼。
运行效果见：https://github.com/cyuamber/randomcolor
网友评论