随机色有两种格式：

效果预览：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. html 生成pdf

    HTML生成PDF(c#) 最近因为工作需要,小小的研究了一下HTML生成PDF的方法,这方面的内容很多,但要么是不尽如人意的方法,要么就是那种收费的类库!为了广大.neter的福利,把自己的一点小小 ...

  2. 移动端页面按手机屏幕分辨率自动缩放的js

    <script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.scr ...

  3. removeClass 按钮点击添加class效果

    html代码: <div class="game"> <span class="active">全部</span> < ...

  4. SQL Server 迁移数据到MySQL

    一.背景 由于项目开始时候使用的数据库是SQL Server,后来把存储的数据库调整为MySQL,所以需要把SQL Server的数据转移到MySQL:由于涉及的表比较多,所以想在MySQL中生成对应 ...

  5. es6学习笔记一数组（中）

    接着上一篇,给大家再分享一些数组的其他方法.大家也可以去点击这里学习数组更多的方法 concat方法: 概述:    concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回. ...

  6. jQuery 自带的动画效果

    1.方法: show:显示选中元素. hide:隐藏选中元素. toggle:显示或隐藏选中元素. fadeIn:将选中元素的不透明度逐步提升到100%. fadeOut:将选中元素的不透明度逐步降为 ...

  7. gravatar配置和使用【让你的网站使用全球通用头像】

    前言 我们在很多博客或者网站留言,评论的时候会看到有的人头像很酷很个性化,但是这个博客和网站本身并没有提供设置头像的功能,感觉有点神奇,那么是怎么做到的呢?其实这是使用了Gravatar. Grava ...

  8. GCD 扫盲篇

    GCD有四个概念:串行队列.并行队列.同步.异步四者. 如下简介: 这里不仅给出了不确定性,而且也给出了确定性.对于初学者而言,有时候因为那些不确定的东西所造成的疑问会像没有闸却在疾驰的汽车一样让人惊 ...

  9. 算法：KMP算法

    算法:KMP排序 算法分析 KMP算法是一种快速的模式匹配算法.KMP是三位大师:D.E.Knuth.J.H.Morris和V.R.Pratt同时发现的,所以取首字母组成KMP. 少部分图片来自孤~影 ...

  10. Java中写文件操作

    OutputStream 和 Writer OutputStream类(直接操作byte数组) 该类是字节输出流的抽象类,定义了输出流的各种操作方法.如下图是OutputStream的层次结构: By ...