javascript实现随机生成DIV背景色
随机色有两种格式：
效果预览：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> <divclass="main"> <p><ahref="javascript:;"id="btn-one">RandomColor-rgb</a></p> <ul> <li><divclass="bg_color"></div></li> <li><divclass="bg_color"></div></li> <li><divclass="bg_color"></div></li> <li><divclass="bg_color"></div></li> </ul> </div> <divclass="main"> <p><ahref="javascript:;"id="btn-two">RandomColor-#XXXXXX</a></p> <ul> <li><divclass="bg_two"></div></li> <li><divclass="bg_two"></div></li> <li><divclass="bg_two"></div></li> <li><divclass="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;
}
pa{
font-size:20px;
font-weight:300;
color:#e4393c;
text-decoration:none;
padding:6px10px;
border:1pxsolidcurrentColor;
}
.bg_color,.bg_two{
width:100px;
height:100px;
border:1pxsolid#aa00aa;
}
.main,.mainul{
overflow:hidden;
}
.main{
width:400px;
margin:30pxauto;
}
.mainulli{
float:left;
}
JS
<script>
(function(){
//1、随机色的函数-rgb
functiongetRandomColor(){
varrgb='rgb('+Math.floor(Math.random()*255)+','
+Math.floor(Math.random()*255)+','
+Math.floor(Math.random()*255)+')';
console.log(rgb);
returnrgb;
}
//获取按钮
varbtn_one=document.querySelector("#btn-one");
varDivs=document.querySelectorAll(".bg_color");
btn_one.onclick=function(){
for(vari=0;i<Divs.length;i++){
Divs[i].style.backgroundColor=getRandomColor();
}
};
//2、随机颜色#XXXXXX
varbtn_two=document.querySelector("#btn-two");
vardivsTwo=document.querySelectorAll(".bg_two");
varchars=['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
functiongenerateMixed(n){
varres="#";
varid;
for(vari=0;i<n;i++){
id=Math.floor(Math.random()*16);
res+=chars[id];
}
console.log(id,res);
returnres;
}
btn_two.onclick=function(){
for(vari=0;i<divsTwo.length;i++){
divsTwo[i].style.backgroundColor=generateMixed(6);
}
};
})()
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。