SoFunction
Updated on 2025-04-10

JavaScript implements random generation of DIV background colors

Random colors are available in two formats:
Effect preview:/DEMOLIST/JS/test/
 1、rgb(xxx,xxx,xxx)
 2、#xxxxxx
The following two random methods are implemented
Ideas:How to make x random
1. The xxx in it is a random integer between 0-255. Use ()*255 to obtain a random number between 0-255.
Then () keep the decimal point before it
2. The x in it is a random combination of 6 in 0123456789abxdef,
Here you can use an array or a string to process it. Here you use an array. Just take 6 times from the array and get the array subscript is a random integer between 0-16 each time.
Notice(Although the change in Method 2 is #XXXX, the browser checks the background-color attribute value of the DOM element in this case, but the assignment in JS is in #xxx format.)
The code is as follows:
 HTML

<body>
  <div class="main">
    <p><a href="javascript:;" >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:;" >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

&lt;script&gt;
  (function(){
    //1. Random color function - rgb    function getRandomColor(){
      var rgb='rgb('+(()*255)+','   

      +(()*255)+','  

      +(()*255)+')';
      (rgb);
      return rgb;
    }
// Get button    var btn_one=("#btn-one");
    var Divs=(".bg_color");
    btn_one.onclick=function(){
      for(var i=0;i&lt;;i++){
        Divs[i].=getRandomColor();
      }
    };
    //2. Random color #XXXXXXXX    var btn_two=("#btn-two");
    var divsTwo=(".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 &lt; n ; i ++) {
        id= (()*16);
        res += chars[id];
      }
      (id,res);
      return res;
    }
    btn_two.onclick=function(){
      for(var i=0;i&lt;;i++){
        divsTwo[i].=generateMixed(6);
      }
    };
  })()
&lt;/script&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.