随机色有两种格式：

效果预览：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. 深入理解DOM事件类型系列第二篇——键盘事件

    × 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...

  2. MVC解决Json DataGrid返回的日期格式是/Date(20130450000365)

    实际上是Json格式化问题,我们应该在返回json的时候进行格式化,我们需要重写系统的JsonResult类 using System; using System.Collections.Generi ...

  3. 模板引擎Nvelocity实例

    前言 最近一直忙于工作,没时间来管理博客,同时电脑也不给力,坏了一阵又一阵,最后还是去给修理了,这不刚一回来迫不及待的就写一篇文章来满足两个月未写博客的紧迫感. Nvelocity 关于nveloci ...

  4. 浅谈web语义化

    在前端的编程道路上,是否听过html的结构语义化? 是否觉得自己前端嘛,只要做出炫酷的效果,编写出牛逼的JavaScript代码就ok啦.div+css所向无敌,干嘛要用其他标签呢. 是啊,正如上面所 ...

  5. scikit-learn 朴素贝叶斯类库使用小结

    之前在朴素贝叶斯算法原理小结这篇文章中,对朴素贝叶斯分类算法的原理做了一个总结.这里我们就从实战的角度来看朴素贝叶斯类库.重点讲述scikit-learn 朴素贝叶斯类库的使用要点和参数选择. 1. ...

  6. KVC & KVO

    KVC和KVO看上去又是两个挺牛的单词简写,KVC是Key-Value Coding的简写,是键值编码的意思.KVO是Key-Value  Observing的简写,是键值观察的意思.那么我们能拿KV ...

  7. 【记录】AutoMapper Project To OrderBy Skip Take 正确写法

    AutoMapper:Queryable Extensions 示例代码: using (var context = new orderEntities()) { return context.Ord ...

  8. 使用SPIRE.XLS来创建Excel 工作簿

               使用SPIRE.XLS来创建Excel 工作簿     概要 最近在研究 .NET 控件,使用这些控件在程序中可以快速低成本实现功能. 在这一篇中我们使用的控件是Spire.XL ...

  9. 安装infer整个过程

    日期:2015-06-26 孟起  15:43:25 大神.. 孟起  15:43:38 我是不是照着这个安装 HelloWorld  15:45:05 直接找二进制文件安卓就行 孟起  15:46: ...

  10. PHP之验证码的实现

    简单的用PHP实现验证码: ?php /** *制作验证码 *1.启动session *2.设定标头 *3.创建画布 *4.创建颜色 *5.创建随机数并放到画布上 *6.将得到的若干随机数放入sess ...