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
<script> (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<;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 < n ; i ++) { id= (()*16); res += chars[id]; } (id,res); return res; } btn_two.onclick=function(){ for(var i=0;i<;i++){ divsTwo[i].=generateMixed(6); } }; })() </script>
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.