用js写一个九宫格内三个格子颜色随机闪动的效果。_js实现点击开始闪烁则上面的九宫格开始背景闪烁-优快云博客

本文链接：https://blog.youkuaiyun.com/mo_jiu/article/details/80666531

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色随机的方块</title>
<style>
html{
font-size: 10px;
}
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
}
.content{
width: 40rem;
height: 40rem;
margin: 20px auto;
background-color: #e2e2e2;
border-radius: 5px;
}
.box{
height: 100%;
width: 100%;
display: flex;
flex-flow: row wrap;
list-style: none;
justify-content: space-around;
padding: 0.5rem;
box-sizing: border-box;
}
.box>li{
width: 33.3%;
height: 33.3%;
padding: 0.5rem;
box-sizing: border-box;
border-radius: 3px;
text-align: center;
line-height: 15rem;
}
.box>li>div{
width: 100%;
height: 100%;
background-color: yellow;
}
.btn{
width: 40rem;
margin: 0 auto;
}
.btn>div{
height: 2rem;
text-align: center;
width: 20%;
margin: 0.5rem auto;
line-height: 2rem;
background-color: #e6e6e6;
border-radius: 0.5rem;
cursor: pointer;
}
</style>
</head>
<body>
<div class="content">
<ul class="box">
<li><div class="let_style">1</div></li>
<li><div class="let_style">2</div></li>
<li><div class="let_style">3</div></li>
<li><div class="let_style">4</div></li>
<li><div class="let_style">5</div></li>
<li><div class="let_style">6</div></li>
<li><div class="let_style">7</div></li>
<li><div class="let_style">8</div></li>
<li><div class="let_style">9</div></li>
</ul>
<div class="btn">
<div id="run">点击开始</div>
<div id="stop">点击结束</div>
</div>
</div>
<script>
var list = document.getElementsByClassName('let_style');
var run = document.getElementById('run');
var stop = document.getElementById('stop');
var time;
function begin(one,two,three) {
if(one == two || two == three || one == three){
if(one == two){
one = Math.floor(Math.random()*list.length);
}else if(two == three){
two = Math.floor(Math.random()*list.length);
}else if(one == three){
three = Math.floor(Math.random()*list.length);
}
begin(one,two,three);
}else{
list[one].style.backgroundColor = 'rgb'+ colors();
list[two].style.backgroundColor = 'rgb'+ colors();
list[three].style.backgroundColor = 'rgb'+ colors();
}
//console.log()

}

function colors() {
var rgb;
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
rgb = '('+r+','+g+','+b+')';
return rgb;
}
run.onclick = function(){
clearInterval(time);
time = setInterval(function(){
for(var i = 0; i < list.length; i++){
list[i].style.backgroundColor = '';
}
var one = Math.floor(Math.random()*list.length);
var two = Math.floor(Math.random()*list.length);
var three = Math.floor(Math.random()*list.length);
begin(one,two,three);

},1000);
}
stop.onclick = function(){
clearInterval(time);
for(var i = 0; i < list.length; i++){
list[i].style.backgroundColor = '';
}
}

</script>
</body>