js实现DIV背景色随机

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>RandomColor</title>
  6.     <style>
  7.         *{
  8.             box-sizing: border-box;
  9.             list-style: none;
  10.             border: none;
  11.             padding: 0;
  12.             margin: 0;
  13.         }
  14.         p{
  15.             text-align: center;
  16.             margin: 20px;
  17.         }
  18.         p a{
  19.             font-size: 20px;
  20.             font-weight: 300;
  21.             color: #e4393c;
  22.             text-decoration: none;
  23.             padding: 6px 10px;
  24.             border: 1px solid currentColor;
  25.         }
  26.         .bg_color,.bg_two{
  27.             width: 100px;
  28.             height: 100px;
  29.             border: 1px solid #aa00aa;
  30.             margin-left: 10px;
  31.         }
  32.         .main,.main ul{
  33.             overflow: hidden;
  34.         }
  35.         .main{
  36.             width: 440px;
  37.             margin:30px auto;
  38.         }
  39.         .main ul li{
  40.             float: left;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="main">
  46.         <p><a href="javascript:;" id="btn-one">RandomColor-rgb</a></p>
  47.         <ul>
  48.             <li><div class="bg_color"></div></li>
  49.             <li><div class="bg_color"></div></li>
  50.             <li><div class="bg_color"></div></li>
  51.             <li><div class="bg_color"></div></li>
  52.         </ul>
  53.     </div>
  54.     <div class="main">
  55.         <p><a href="javascript:;" id="btn-two">RandomColor-#XXXXXX</a></p>
  56.         <ul>
  57.             <li><div class="bg_two"></div></li>
  58.             <li><div class="bg_two"></div></li>
  59.             <li><div class="bg_two"></div></li>
  60.             <li><div class="bg_two"></div></li>
  61.         </ul>
  62.     </div>
  63. </body>
  64. <script>
  65.     (function(){
  66.         //1、随机色的函数-rgb
  67.         function getRandomColor(){
  68.             var rgb='rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')';
  69.             console.log(rgb);
  70.             return rgb;
  71.         }
  72. //    获取按钮
  73.         var btn_one=document.querySelector("#btn-one");
  74.         var Divs=document.querySelectorAll(".bg_color");
  75.         btn_one.onclick=function(){
  76.             for(var i=0;i<Divs.length;i++){
  77.                 Divs[i].style.backgroundColor=getRandomColor();
  78.             }
  79.         };
  80.         //2、随机颜色#XXXXXX
  81.         var btn_two=document.querySelector("#btn-two");
  82.         var divsTwo=document.querySelectorAll(".bg_two");
  83.         var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
  84.         function generateMixed(n) {
  85.             var res = "#";
  86.             var id;
  87.             for(var i = 0; i < n ; i ++) {
  88.                 idMath.floor(Math.random()*16);
  89.                 res += chars[id];
  90.             }
  91.             console.log(id,res);
  92.             return res;
  93.         }
  94.         btn_two.onclick=function(){
  95.             for(var i=0;i<divsTwo.length;i++){
  96.                 divsTwo[i].style.backgroundColor=generateMixed(6);
  97.             }
  98.         };
  99.     })()
  100. </script>
  101. </html>
演示地址:https://liuyanzhao.com/demo/randomBg/index.html  

发表评论

目前评论:3

  • avatar 战略

    相当不错,赞

  • avatar 星空游戏

    可惜看不懂,只能点赞了