设置随机颜色值

分享一个为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进制,并转换为数组

可视化结果

<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

未完待续

推荐阅读更多精彩内容

  • 方法1 (数据类型)(最小值+Math.random()*(最大值-最小值+1)) 例: (int)(1+Math...
    GB_speak阅读 28,865评论 2 6
  • 练习要求: 在html页面中做出3*3九个格子,随机抽取其中三个并赋予随机三种不同的背景色。 九宫格下有两个按钮,...
    Coree阅读 1,784评论 0 0
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 2,406评论 0 4
  • 第五章******************************************************...
    fastwe阅读 380评论 0 0
  • 天阴月隐踪,夜黑众山浓。 放眼苍穹问,何时露笑容。 ——平水韵 平起首句押韵
    原野骑兵阅读 487评论 5 15
  • 文章内容由 『亿方云』CEO 程远,在『SmallTalk 2.0 -年关小聚』中的分享整理而成。 ** 文章版权...
    SmallTalkCN阅读 393评论 1 4
  • 下雨的天, 却是放睛的心。 心里窝着一米阳光, 温暖所有的记忆。 游走, 现实与梦幻痴缠。 似梦,非梦, 将醒,未...
    漪清阅读 113评论 2 2
  • 有一天,我像往常一样去上学。到了下午放学之后妈妈来接我了,这时天上也下起了毛毛细雨。几分钟过去了,我看见妈妈被毛毛...
    故事一阅读 122评论 0 2
  • 春天来了 天空放晴了 欢欢要出门了 他着急地要出门玩耍 忘记了穿鞋子 拉住妈妈的手就往门外跑 妈妈赶紧拦住他,问欢...
    顾一笑阅读 49评论 0 1