javascript实现随机生成DIV背景色

2019-11-20 09:39:49

字体：大中小

来源：转载

供稿：网友

随机色有两种格式：
效果预览：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: 0;      margin: 0;    }    p{      text-align: center;      margin: 20px;    }    p a{      font-size: 20px;      font-weight: 300;      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;    }

<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：jQuery Tags Input Plugin（添加/删除标签插件）详解

下一篇：使用jQuery Rotare实现微信大转盘抽奖功能