快捷導(dǎo)航

javascript實現(xiàn)隨機生成DIV背景色

更新時間：2016年06月20日 09:34:22 作者：九成

這篇文章主要介紹了javascript實現(xiàn)隨機生成DIV背景色的具體代碼，如何設(shè)置DIV背景色為隨機色，感興趣的小伙伴們可以參考一下

隨機色有兩種格式：
效果預(yù)覽：http://wjf444128852.github.io/DEMOLIST/JS/test/index.html
1、rgb(xxx,xxx,xxx)
2、#xxxxxx
下面實現(xiàn)兩種隨機的方法
思路：如何讓x都是隨機的，
1、中的xxx是0-255之間的隨機整數(shù)，用Math.random()*255取得0-255之間的隨機數(shù)，
再Math.floor()保留小數(shù)點前面的
2、中的x是0123456789abxdef中的隨機6個的組合，
這里可以用數(shù)組或者字符串處理，這里采用數(shù)組，只要從數(shù)組里取6次，每次取得數(shù)組下標(biāo)是0-16之間的隨機整數(shù)即可。
注意(法二中雖然改變的是#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;
    }

JS

<script>
  (function(){
    //1、隨機色的函數(shù)-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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: