随机色有两种格式：

效果预览：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. AngularJS表单验证实现方法详解

    本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...

  2. MongoDB 数据分发

    在MongoDB(版本 3.2.9)中,数据的分发是指将collection的数据拆分成块(chunk),分布到不同的分片(shard)上,数据分发主要有2种方式:基于数据块(chunk)数量的均衡分 ...

  3. OleDb Source component 用法

    OleDb Source component 主要是从DB中获取数据,传递给下游组件,OleDb Source component的强大之处在于 query data 的mode有四种,如图 Tabl ...

  4. 解密jQuery事件核心 - 委托设计（二）

    第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...

  5. Android之genymotion模拟器安装于配置

    今天是双休日,可怜没人陪,只好一个人玩电脑了,之前别人一直给我推荐genymotion模拟器,说各种方便,秒杀Android自带模拟器,所以就趁这个周末搞了一下,总体感觉还挺不错的,确实比Androi ...

  6. Web APi之认证（Authentication）及授权（Authorization）【一】（十二）

    前言 无论是ASP.NET MVC还是Web API框架,在从请求到响应这一过程中对于请求信息的认证以及认证成功过后对于访问页面的授权是极其重要的,用两节来重点来讲述这二者,这一节首先讲述一下关于这二 ...

  7. ios如何在#import方面提升编译性能

    模块的使用非常简单,对于存在的工程,第一件事情就是让这个功能生效.可以在项目的Build Settings 中搜索Modules 找到这个选项,做以下的设置 默认的情况下都是开启的 对于系统自带的只需 ...

  8. Hibernate之HQL查询的一些例子

    Hibernate配备了一种非常强大的查询语言,就是HQL(hibernate query language),HQL看上去很像sql,但只是语法结构上相似,HQL是一种面向对象的查询,他可以理解继承 ...

  9. ECMAScript 6 开篇准备

    1前言 该系列文章均为学习阮一峰老师<ECMAScript 6 入门>一书的学习笔记.原著:http://es6.ruanyifeng.com/ 各大浏览器的最新版本,对ES6的支持可以查 ...

  10. 如何用easyui+JAVA 实现动态拼凑datagrid表格

    先给大家看一看效果,最近一段时间都在研究这个东西. 如果我把日期间隔选宽呢?比如5月日到5月5日?下面给大家看看效果,不用担心哦 看到了吧,哈哈,这个日期都是动态生成的,下面就来跟大家分享一下这个的实 ...