随机色有两种格式：

效果预览：http://wjf444128852.github.io/DEMOLIST/JS/test/index.html1、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

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.οnclick=function(){

for(var i=0;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.οnclick=function(){

for(var i=0;i

divsTwo[i].style.backgroundColor=generateMixed(6);

}

};

})()

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