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

最新推荐文章于 2022-09-20 21:59:03 发布

CreatorRay

最新推荐文章于 2022-09-20 21:59:03 发布

阅读量1k

点赞数

分类专栏：前端文章标签： js html css javascript 前端

本文链接：https://blog.csdn.net/m0_46171043/article/details/108660673

版权

前端专栏收录该内容

264 篇文章 23 订阅

订阅专栏

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

<!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">
		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">
		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、全栈、Nodejs、Python等实战学习资料
在这里插入图片描述

CreatorRay

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端基础练习---闪烁霓虹灯的实现

话不多说，先看效果源码先来以下~~~~<!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">
复制链接

扫一扫