用js写一个九宫格内三个格子颜色随机闪动的效果。

<!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() {
            var one = Math.floor(Math.random()*list.length);
            var two = Math.floor(Math.random()*list.length);
            var three = Math.floor(Math.random()*list.length);
            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);
            }
            list[one].style.backgroundColor = 'rgb'+ colors();
            list[two].style.backgroundColor = 'rgb'+ colors();
            list[three].style.backgroundColor = 'rgb'+ colors();
		}
        function colors() {
        	var rgb;
        	var r = Math.floor(Math.random()*265);
        	var g = Math.floor(Math.random()*265);
        	var b = Math.floor(Math.random()*265);
        	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 = '';
        	    }
        	    begin();

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


	</script>
</body>

一、样式方面不做解释，我就随便进行铺设一个九宫格；

二、主要对js部分进行思路分解；

1.当然是先获取的需要的元素；

2.既然是随机颜色的就要写一个获取随机色的方法，见colors()这个方法中生成是rgb格式的数字，并将生成的数输出；

3.随机闪动那么闪动的方块就也得是随机的，使用index的方式在begin()这个方法中选中三个赋予颜色；同样避免选中的三个块中会重复做一个if判断；

4.对点击按钮进行调用，开始和关闭即可。

用js写一个九宫格内三个格子颜色随机闪动的效果。

猜你喜欢