随机色有两种格式：

效果预览：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

  1. <body>
  2.     <div class="main">
  3.         <p><a href="javascript:;" id="btn-one">RandomColor-rgb</a></p>
  4.         <ul>
  5.             <li><div class="bg_color"></div></li>
  6.             <li><div class="bg_color"></div></li>
  7.             <li><div class="bg_color"></div></li>
  8.             <li><div class="bg_color"></div></li>
  9.         </ul>
  10.     </div>
  11.     <div class="main">
  12.         <p><a href="javascript:;" id="btn-two">RandomColor-#XXXXXX</a></p>
  13.         <ul>
  14.             <li><div class="bg_two"></div></li>
  15.             <li><div class="bg_two"></div></li>
  16.             <li><div class="bg_two"></div></li>
  17.             <li><div class="bg_two"></div></li>
  18.         </ul>
  19.     </div>
  20. </body>

CSS

  1. *{
  2.             box-sizing: border-box;
  3.             list-style: none;
  4.             border: none;
  5.             padding:;
  6.             margin:;
  7.         }
  8.         p{
  9.             text-align: center;
  10.             margin: 20px;
  11.         }
  12.         p a{
  13.             font-size: 20px;
  14.             font-weight:;
  15.             color: #e4393c;
  16.             text-decoration: none;
  17.             padding: 6px 10px;
  18.             border: 1px solid currentColor;
  19.         }
  20.         .bg_color,.bg_two{
  21.             width: 100px;
  22.             height: 100px;
  23.             border: 1px solid #aa00aa;
  24.         }
  25.         .main,.main ul{
  26.             overflow: hidden;
  27.         }
  28.         .main{
  29.             width: 400px;
  30.             margin:30px auto;
  31.         }
  32.         .main ul li{
  33.             float: left;
  34.         }

JS

  1. <script>
  2.     (function(){
  3.         //1、随机色的函数-rgb
  4.         function getRandomColor(){
  5.             var rgb='rgb('+Math.floor(Math.random()*255)+','
                         +Math.floor(Math.random()*255)+','
                         +Math.floor(Math.random()*255)+')';
  6.             console.log(rgb);
  7.             return rgb;
  8.         }
  9. //    获取按钮
  10.         var btn_one=document.querySelector("#btn-one");
  11.         var Divs=document.querySelectorAll(".bg_color");
  12.         btn_one.onclick=function(){
  13.             for(var i=0;i<Divs.length;i++){
  14.                 Divs[i].style.backgroundColor=getRandomColor();
  15.             }
  16.         };
  17.         //2、随机颜色#XXXXXX
  18.         var btn_two=document.querySelector("#btn-two");
  19.         var divsTwo=document.querySelectorAll(".bg_two");
  20.         var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
  21.         function generateMixed(n) {
  22.             var res = "#";
  23.             var id;
  24.             for(var i = 0; i < n ; i ++) {
  25.                 id= Math.floor(Math.random()*16);
  26.                 res += chars[id];
  27.             }
  28.             console.log(id,res);
  29.             return res;
  30.         }
  31.         btn_two.onclick=function(){
  32.             for(var i=0;i<divsTwo.length;i++){
  33.                 divsTwo[i].style.backgroundColor=generateMixed(6);
  34.             }
  35.         };
  36.     })()
  37. </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. SQLyog图形化l数据库的操作和学习

    1:首先SQLyog作为mysql的图形化操作工具,是一个收费的工具,但是在天朝大国,任何收费的软件都可以被破解,具体软件的安装不做多叙述,支持正版,毕竟作为一个开发人员,辛辛苦苦开发出来的软件,还指 ...

  2. 【转】批量复制操作（SqlBulkCopy）的出错处理：事务提交、回滚

    原文地址:http://blog.csdn.net/westsource/article/details/6658109 默认情况下,批量复制操作作为独立的操作执行. 批量复制操作以非事务性方式发生, ...

  3. SQL 里解析 XML 格式 字段 信息

    DECLARE @ItemMessage XML ),zje ),yfje ),bcje ),URL ),Remark )) SET @ItemMessage=N'<List> <i ...

  4. ASP.NET MVC5 网站开发实践(二) Member区域–管理列表、回复及删除

    本来想接着上次把这篇写完的,没想到后来工作的一些事落下了,放假了赶紧补上. 目录: ASP.NET MVC5 网站开发实践 - 概述 ASP.NET MVC5 网站开发实践(一) - 项目框架 ASP ...

  5. Cinder 组件详解 - 每天5分钟玩转 OpenStack（47）

    本节我们将详细讲解 Cinder 的各个子服务. cinder-api cinder-api 是整个 Cinder 组件的门户,所有 cinder 的请求都首先由 nova-api 处理.cinder ...

  6. iframe跨域+

    script.image.iframe的src都不受同源策略的影响.所以我们可以借助这一特点,实现跨域.如前面所介绍的JSONP跨域,以及灯标(Beacons). 该篇随笔主要阐述iframe结合一些 ...

  7. Util应用程序框架公共操作类（一）:数据类型转换公共操作类（介绍篇）

    本系列文章将介绍一些对初学者有帮助的辅助类,这些辅助类本身并没有什么稀奇之处,如何能发现需要封装它们可能更加重要,所谓授之以鱼不如授之以渔,掌握封装公共操作类的技巧才是关键,我会详细说明创建这些类的动 ...

  8. ASP.NET网站优化（转自一位博友的文章，写的非常好）

    不修改代码就能优化ASP.NET网站性能的一些方法 阅读目录 开始 配置OutputCache 启用内容过期 解决资源文件升级问题 启用压缩 删除无用的HttpModule 其它优化选项 本文将介绍一 ...

  9. matlab基础教程——根据Andrew Ng的machine learning整理

    matlab基础教程--根据Andrew Ng的machine learning整理 基本运算 算数运算 逻辑运算 格式化输出 小数位全局修改 向量和矩阵运算 矩阵操作 申明一个矩阵或向量 快速建立一 ...

  10. 基本的window.document操作及实例

    基本的window.document操作及实例 找元素 1.根据id找 var d1 = document.getElementById("d1"); alert(d1); 2.根 ...