隨機色有兩種格式：
效果預覽：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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。