Web前端基础练习---闪烁霓虹灯的实现

话不多说，先看效果
在这里插入图片描述
源码先来以下~~~~

html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">css">
		div {
			position: absolute;
			top: 0;
			left: 0;
			border: 1px solid black;
		}
		.one {
			height: 500px;
			width: 500px;
			z-index: 1;
		}
		.two {
			height: 400px;
			width: 400px;
			z-index: 2;
		}
		.three {
			height: 300px;
			width: 300px;
			z-index: 3;
		}
		.four {
			height: 200px;
			width: 200px;
			z-index: 4;
		}
		.five {
			height: 100px;
			width: 100px;
			z-index: 5;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
	<div class="four"></div>
	<div class="five"></div>
	<script type="text/javascript">javascript">
		var div = document.getElementsByTagName('div');
		var array = ['red','blue','green','black','yellow'];
		var arr = '';
		for(var i = 0; i < array.length ; i++){
			div[i].style.backgroundColor = array[i];
		}
		setInterval(function(){
			arr = array[array.length-1];
			for(var i = 0; i < array.length ; i++){
				div[i].style.backgroundColor = array[i];
			}
			array.pop();
			array.unshift(arr);
		},500);

	</script>
</body>
</html>

这是我上安卓课的时候，老师布置的安卓练习，咱们用HTML、CSS、JS实现一下。
大概思路就是，先写5个div，让他们absolute布局，层层叠盖，设置z-index,首先实现这个覆盖的效果。然后其它所有的操作都有JS实现，核心就是加一个定时器，先操作DOM，拿到这5个div，然后先赋一个初始背景颜色，然后加定时器，每次定时器都把数组的最后一个颜色元素拿出来，放到数组的首部，这样就实现了这个依次按序闪烁，切换颜色的效果。
之前我第一个次，那个算法不太好，这个是目前我能想到的比较简便的实现方法，如果有更好的实现方法，欢迎交流！

个人QQ：505417246
关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodehtml" title=js>js、Python等实战学习资料
在这里插入图片描述