随机色有两种格式：

效果预览：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. 【Win10 开发】读取PDF文档

    关于用来读取PDF文档的内容的API,其实在Win8.1的时候就有,不过没关系,既咱们讨论的是10的UAP,连同8.1的内容也包括进去,所以老周无数次强调:把以前的内容学好了,就可以在不学习任何新知识 ...

  2. 这算是ASP.NET MVC的一个大BUG吗？

    这是昨天一个同事遇到的问题,我觉得这是一个蛮大的问题,而且不像是ASP.NET MVC的设计者有意为之,换言之,这可能是ASP.NET MVC的一个Bug(不过也有可能是保持原始请求数据而作的妥协). ...

  3. 在Linux（ubuntu server）上面安装NodeJS的正确姿势

    上一篇文章,我介绍了 在Windows中安装NodeJS的正确姿势,这一篇,我们继续来看一下在Linux上面安装和配置NodeJS. 为了保持一致,这里也列举三个方法 第一个方法:通过官网下载安装 h ...

  4. C# 设置word文档页面大小

    我们知道,在MS word中,默认的页面大小是letter(8.5’’x11’’),除此之外,word还提供了其他一些预定义的页面大小,如Legal (5.4’’x14’’),A3 (11.69’’x ...

  5. JSON学习

    1.JSON 语法是 JavaScript 对象表示语法的子集. l  数据在名称/值对中 l  数据由逗号分隔 l  花括号保存对象 l  方括号保存数组 JSON 值可以是: l  数字(整数或浮 ...

  6. 《selenium2 Java 自动化测试实战（第二版）》 更新2016.5.3

    java 版来了!! 本文档在<selenium2 Python 自动化测试实战>的基础上,将代码与实例替换为java ,当然,部分章节有变更.这主要更语言本身的特点有关.集合和java下 ...

  7. Kooboo CMS - 之后台注册用户流程方法。

    今天决定写一篇好一点的文章,吼吼!首先我们必须找到这个文件,这个文件是UsersController.cs,我们找到和添加新用户有关的方法,如下代码: public virtual ActionRes ...

  8. 【集合框架】JDK1.8源码分析之HashMap（一）

    一.前言 在分析jdk1.8后的HashMap源码时,发现网上好多分析都是基于之前的jdk,而Java8的HashMap对之前做了较大的优化,其中最重要的一个优化就是桶中的元素不再唯一按照链表组合,也 ...

  9. RabbitMQ原理与相关操作(三)消息持久化

    现在聊一下RabbitMQ消息持久化: 问题及方案描述 1.当有多个消费者同时收取消息,且每个消费者在接收消息的同时,还要处理其它的事情,且会消耗很长的时间.在此过程中可能会出现一些意外,比如消息接收 ...

  10. 使用AutoMapper进行对象间映射

    在开发过程中,难免遇到下面这种情况:两个(或多个)对象所拥有的大多数属性是重复的,我们需要在对象间进行映射(即将一个对象的属性值赋给另一个对象.通常我们可以进行如下操作: A a=new A(); a ...