利用计时器改变标签的背景颜色

短命女 2021-09-15 10:16 387阅读 0赞

场景介绍：

在浏览网页的时候，发现有些网页的对指定的标签做了特效处理-定时改变标签的背景颜色。本人小白，尝试着做简单模仿，一下代码仅供参考。

思路分析：

“定时”---说明需要采用计时器

“改变”---说明每一次的背景颜色不同，可以采用一个数组，数组中每个元素都是一种颜色，对应background的属性值。

问题分析：

1.每次使用计时器前必须清楚计时器（这是由计时器本身的特点决定的，不然会出现计时器累加效果。）

2.每次的颜色值不同，本质上就是对应数组中元素的下标不同，且要不断的变化及循环，所以可以采用声明变量的方法，每次变量进行累加，对数组长度值取余，来表示数组中元素的下标。

代码示例：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>定时改变标签的背景颜色</title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			
    			#element {
    				background: red;
    				border: 3px solid black;
    				width: 200px;
    				height: 200px;
    				border-radius: 50%;
    				font-size: 20px;
    				text-align: center;
    				line-height: 200px;
    				margin: 100px auto;
    				
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="element">GO!</div>
    	</body>
    
    </html>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
    	var timer = null;
    	var num = 0;
    	var aColor = ["blue", "yellow", "red", "pink", "green", "gold", "darkcyan", "salmon"];
    	var colLength = aColor.length
    	clearInterval(timer);
    	timer = setInterval(function() {
    		$("#element").css("background-color", aColor[num]);
    		num++;
    		num %= colLength;
    		console.log(num);
    	}, 1000)
    </script>

效果对比：

![20180512143614670][]![20180512143621871][]![20180512143628116][]

思路扩展：

除了采用数组外，还可以采用随机颜色（声明随机颜色函数）。js代码做如下变更：

[20180512143614670]: https://img-blog.csdn.net/20180512143614670
[20180512143621871]: https://img-blog.csdn.net/20180512143621871
[20180512143628116]: /images/20210802/3b6791a22c77481dbd741113d4615578.png