javascript实现随机生成DIV背景色

时间：2021-05-26

随机色有两种格式：
效果预览：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; }

JS

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

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章