js+jQuery切换背景颜色，类似警灯闪烁

最新推荐文章于 2023-01-12 18:30:06 发布

南宫廿贰

最新推荐文章于 2023-01-12 18:30:06 发布

阅读量998

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43330884/article/details/102666497

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JS+jQuery自动切换背景颜色，可以点击按钮暂停或开始
大家可以看看效果图：
在这里插入图片描述看看代码吧：

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jQuery.js"></script>
		<style>
			.blue{
				width: 100%;
				height: 25px;
				background-color: blue;
			}
			.red{
				width: 100%;
				height: 25px;
				background-color: red;
			}
			p{
				text-align: center;
			}
			input{
				width: 100px;
				height: 32px;
			}
    </style>
	</head>
	<body>
		
		<div class="blue"></div><!-- 显示区域 -->
		<p>
			<input type="button" class="begin" value="开始">
			<input type="button" class="pause " value="暂停">
		</p>

		<script type="text/javascript">
			var interval;
			//默认是启动的
			interval = setInterval(function() {
				$("div").toggleClass("red");//如果存在(不存在)就删除(添加)一个类
			}, 640);
			//开始
			$(function() {
				$(".begin").on("click", function() { //绑定点击事件
					interval = setInterval(function() {//间隔指定的毫秒数不停地执行指定的代码;setInterval(函数,毫秒数)
						$("div").toggleClass("red");
					}, 560);
				});
			});			
			//暂停
			$(function() {
				$(".pause").on("click", function() {
					clearInterval(interval);//clearInterval() 方法用于停止 setInterval() 方法执行的函数代码
				});
			});	
		</script>
	</body>
</html>