js三个交通灯的循环变色

最新推荐文章于 2022-04-26 00:00:00 发布

00_JackLu

最新推荐文章于 2022-04-26 00:00:00 发布

阅读量514

点赞数

分类专栏： web代码笔记文章标签： js三个交通灯的循环变色

本文链接：https://blog.csdn.net/qq_43399648/article/details/90712613

版权

web代码笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

<!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>

00_JackLu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js三个交通灯的循环变色

总感觉这个代码很麻烦，等我想想有没有改良版的哈哈哈哈哈哈哈<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #aa{ border: black...
复制链接

扫一扫