javascript实现随机生成DIV背景色

前端之家收集整理的这篇文章主要介绍了javascript实现随机生成DIV背景色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

随机色有两种格式: 效果预览:随机的方法

思路:

如何让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

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

(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);
}
};
})()

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

猜你在找的JavaScript相关文章