随机色有两种格式：

效果预览：http://wjf444128852.github.io/DEMOLIST/JS/test/index.html

1、rgb(xxx,xxx,xxx)

2、#xxxxxx

下面实现两种随机的方法

思路：

就是如何让x都是随机的，

1、中的xxx是0-255之间的随机整数，用Math.random()*255取得0-255之间的随机数，

再Math.floor()保留小数点前面的

2、中的x是0123456789abxdef中的随机6个的组合，

这里可以用数组或者字符串处理，这里采用数组，

只要从数组里取6次，每次取得数组下标是0-16之间的随机整数即可。

注意(法二中虽然改变的是#XXXX，此时浏览器查看DOM元素的background-color属性值还是rgb格式的，

但是JS中赋值是#xxx格式。)

代码如下：

HTML

<body>

    <div class="main">

        <p><a href="javascript:;" id="btn-one">RandomColor-rgb</a></p>

        <ul>

            <li><div class="bg_color"></div></li>

            <li><div class="bg_color"></div></li>

            <li><div class="bg_color"></div></li>

            <li><div class="bg_color"></div></li>

        </ul>

    </div>

    <div class="main">

        <p><a href="javascript:;" id="btn-two">RandomColor-#XXXXXX</a></p>

        <ul>

            <li><div class="bg_two"></div></li>

            <li><div class="bg_two"></div></li>

            <li><div class="bg_two"></div></li>

            <li><div class="bg_two"></div></li>

        </ul>

    </div>

</body>

CSS

*{

            box-sizing: border-box;

            list-style: none;

            border: none;

            padding:;

            margin:;

        }

        p{

            text-align: center;

            margin: 20px;

        }

        p a{

            font-size: 20px;

            font-weight:;

            color: #e4393c;

            text-decoration: none;

            padding: 6px 10px;

            border: 1px solid currentColor;

        }

        .bg_color,.bg_two{

            width: 100px;

            height: 100px;

            border: 1px solid #aa00aa;

        }

        .main,.main ul{

            overflow: hidden;

        }

        .main{

            width: 400px;

            margin:30px auto;

        }

        .main ul li{

            float: left;

        }

JS

<script>

    (function(){

        //1、随机色的函数-rgb

        function getRandomColor(){

            var rgb='rgb('+Math.floor(Math.random()*255)+','
                     +Math.floor(Math.random()*255)+','
                     +Math.floor(Math.random()*255)+')';

            console.log(rgb);

            return rgb;

        }

//    获取按钮

        var btn_one=document.querySelector("#btn-one");

        var Divs=document.querySelectorAll(".bg_color");

        btn_one.onclick=function(){

            for(var i=0;i<Divs.length;i++){

                Divs[i].style.backgroundColor=getRandomColor();

            }

        };

        //2、随机颜色#XXXXXX

        var btn_two=document.querySelector("#btn-two");

        var divsTwo=document.querySelectorAll(".bg_two");

        var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];

        function generateMixed(n) {

            var res = "#";

            var id;

            for(var i = 0; i < n ; i ++) {

                id= Math.floor(Math.random()*16);

                res += chars[id];

            }

            console.log(id,res);

            return res;

        }

        btn_two.onclick=function(){

            for(var i=0;i<divsTwo.length;i++){

                divsTwo[i].style.backgroundColor=generateMixed(6);

            }

        };

    })()

</script>

javascript如何设置DIV背景色为随机色的更多相关文章

  1. JS---案例：点击按钮设置div背景色渐变

    案例:点击按钮设置div背景色渐变 背景色渐变:设置透明度 <div id="dv"></div> <input type="button& ...

  2. JavaScript动态设置div的样式的方法

    有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简 ...

  3. 【转】CSS设置DIV背景色渐变显示

     [原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css">     .linear{ ...

  4. CSS设置DIV背景色渐变显示

    本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...

  5. CSS设置DIV背景色渐变

    div{ width: 200px; height: 200px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=, ...

  6. div 背景色设置_DIV背景颜色设置

    DIV 背景色设置篇-div背景颜色设置篇 一.div标签内直接设置背景颜色   -   TOP <div style="background:#000; color:#FFF&quo ...

  7. 影响div背景色显示的问题

    说来惭愧,走上程序猿这条不归路已经一年了,却连自己的博客都没有.看到道上有脸面的大神博客都做得贼漂亮~~于是,按捺不住了~~ 今天终于开通了博客园博客,正式开始我的博客人生啦!!!~~吼吼~~ 废话少 ...

  8. Android 使用shape定义不同控件的的颜色、背景色、边框色

    Android 使用shape定义不同控件的的颜色.背景色.边框色 设置按钮的右边框和底边框颜色为红色,边框大小为3dp: 在drawable新建一个 buttonstyle.xml的文件,内容如下: ...

  9. React Native 设置RGBA背景色

    React Native 设置RGBA背景色: 可以先用Mac自带吸色工具,获取RGB值,然后设置背景如下: backgroundColor: 'rgba(52, 52, 52, 0.8)', 透明度 ...

随机推荐

  1. Android Drawable 那些不为人知的高效用法

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43752383,本文出自:[张鸿洋的博客] 1.概述 Drawable在我们平时的 ...

  2. VMware Workstation and Hyper-V are not compatible. 解决方案

    VMware 和 Hyper-V 不能共存问题报错如下:VMware Workstation and Hyper-V are notcompatible. Remove the Hyper-V rol ...

  3. WPF datagrid 加入图片

    <DataGridTemplateColumn Header="图像" Width="SizeToCells"> <DataGridTempl ...

  4. VS2013中web项目中自动生成的ASP.NET Identity代码思考

    vs2013没有再分webform.mvc.api项目,使用vs2013创建一个web项目模板选MVC,身份验证选个人用户账户.项目会生成ASP.NET Identity的一些代码.这些代码主要在Ac ...

  5. 关于SubSonic3.0插件使用实体进行更新操作时（执行T.Update()或T.Save()），某些列无法进行修改操作的问题处理

    SubSonic3.0插件在创建实体后,对实体进行赋值操作时,为了去除一些不必要更新的字段,减少更新的内容,会将更新内容与默认值进行比较,如果默认值与当前更新的内容相等时,则不提交更新本列,这主要是为 ...

  6. ES6 - Note2：解构赋值

    ES6的解构赋值就是利用模式匹配从按照一定模式的数组或者对象中提取值赋值给变量. 1.数组的解构赋值 在ES6以前,变量的赋值是直接指定的,以后可以这么来写,如下所示 let [a,b,c] = [1 ...

  7. IDDD 实现领域驱动设计－架构之经典分层

    上一篇:<IDDD 实现领域驱动设计-上下文映射图及其相关概念> 在<实现领域驱动设计>书中,分层的概念作者讲述的很少,也就几页的内容,但对于我来说,有很多的感触需要诉说.之前 ...

  8. 关于近段时间论坛型APP 的一段舍弃

    一直以为缓存务必要做的很好,好到什么程度呢,我曾这样想,用户在下滑数刷新的时候也要做到,先加载久缓存再加载新的,同时只改变旧的某些项.这样的想法真的很好!好到我花费了三天去设计数据库和服务器的 php ...

  9. [ES] 基础概念

    Elasticsearch是基于Luence实现的一款搜索引擎,支持分布式和集群,并且搜索近实时,主要用于搜索和数据分析 索引 index 可以理解为数据库中的database,存储的是实际数据,因为 ...

  10. SSH整合时执行hibernate查询报错:java.lang.ClassCastException: com.ch.hibernate.Department_$$_javassist_0 cannot be cast to javassist.util.proxy

    今天在整合ssh三个框架时,有一个功能,是查询所有员工信息,且员工表和部门表是多对一的映射关系,代码能正常运行到查询得到一个List集合,但在页面展示的时候,就报异常了, java.lang.Clas ...