js三个交通灯的循环变色

总感觉这个代码很麻烦,等我想想有没有改良版的
哈哈哈哈哈哈哈

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#aa{
				border: black 1px solid;
	
				height: 200px;
				width: 200px;
				border-radius:50%;
				float: left;
			}
			#bb{
				border: black 1px solid;
	
				height: 200px;
				width: 200px;
				border-radius:50%;
				float: left;
			}
			#cc{
				border: black 1px solid;
				height: 200px;
				width: 200px;
				border-radius:50%;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="aa">
		</div>
		<div id="bb">		
		</div>
		<div id="cc">	
		</div>
		<button onclick="zz()">阿斯达</button>
	</body>
	<script type="text/javascript">
		var a=document.getElementById("aa");	
		var b=document.getElementById("bb");
		var c=document.getElementById("cc");
		a.style.backgroundColor="black";
		b.style.backgroundColor="black";
		c.style.backgroundColor="black";
		var d=["red","green","yellow","black"];
		var i=0;
		function ss(){
			if(i==0)
			{
				a.style.backgroundColor=d[0];
		b.style.backgroundColor="black";
		c.style.backgroundColor="black";
			}
			else if(i==1)
			{
				a.style.backgroundColor="black";
		b.style.backgroundColor=d[1];
		c.style.backgroundColor="black";
			}
			else{
				a.style.backgroundColor="black";
		b.style.backgroundColor="black";
		c.style.backgroundColor=d[2];
			}
			i++;
			i=i%3;
		}
		function zz(){
				setInterval("ss()",1000);
			}
	</script>
</html>

猜你喜欢

转载自blog.csdn.net/qq_43399648/article/details/90712613