跑马灯、霓虹灯效果

最新推荐文章于 2022-02-28 16:51:59 发布

werch

最新推荐文章于 2022-02-28 16:51:59 发布

阅读量351

点赞数

分类专栏： js js 小案例

本文链接：https://blog.csdn.net/weixin_42666092/article/details/115120025

版权

js 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

js 小案例

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>霓虹灯效果</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#wp {
				padding:50px 0;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px #f00 solid;
			}
			#wp div {
				margin:50px;
				border: 1px #f00 solid;
				background-color: #fff;
			}
			.nei {
				width:100px;
				height:100px;
			}
			.wai {
				width:508px;
				height:508px;
			}
			.btn-box {
				display: flex;
				justify-content: center;
				align-items: center;
				height:40px;
			}
			.btn-box button {
				height:40px;
				width:100px;
				text-align: center;
				line-height: 40px;
				cursor: pointer;
				margin:0 40px;
				font-size:20px;
			}
		</style>
	</head>
	<body>
		<div id="wp">
			<div class="wai">
				<div>
					<div>
						<div>
							<div class="nei"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="btn-box">
			<button type="button" id="outIn">从外到内</button>
			<button type="button" id="inOut">从内到外</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	var outIn = document.getElementById("outIn");
	var inOut = document.getElementById("inOut");
	var wp = document.getElementById("wp");
	var divs = wp.getElementsByTagName('div');
	
	//声明一个存放颜色的数组
	var colors = ['#fff','#fff','#fff','#fff','#fff'];
	
	//点击从外到内
	outIn.onclick = function(){
		//随机颜色
		var r = Math.floor(Math.random()*256);
		var g = Math.floor(Math.random()*256);
		var b = Math.floor(Math.random()*256);
		var rgb = 'rgb('+r+','+g+','+b+')';
		//把颜色放入数组头部
		colors.unshift(rgb);
		
		// 从尾部删除一个颜色
		colors.pop();
		//for 循环divs数组，把对应位置上的colors存放的颜色，添加给对应的div
		//最外层的div是数组的头，最内层的div是数组的尾
		for(var i=0;i<divs.length;i++){
			divs[i].style.background = colors[i];
		}
	};
	
	//点击从内到外
	inOut.onclick = function(){
		//随机颜色
		var r = Math.floor(Math.random()*256);
		var g = Math.floor(Math.random()*256);
		var b = Math.floor(Math.random()*256);
		var rgb = 'rgb('+r+','+g+','+b+')';
		
		colors.push(rgb);
		colors.shift();
		
		for(var i=0;i<divs.length;i++){
			divs[i].style.background = colors[i];
		}
		
	};
	
	
	
</script>