JavaScript定时器切换背景

最新推荐文章于 2021-07-08 10:06:31 发布

Lvdon9

最新推荐文章于 2021-07-08 10:06:31 发布

阅读量969

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_37995109/article/details/85729078

版权

JavaScript 专栏收录该内容

106 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>无标题文档</title>
		<style>
			#div1 {
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
	</head>

	<body>
		<input type="button" value='换背景吧' />
		<input type="button" value="停"/>
	</body>
	<script>
			var aBtn=document.getElementsByTagName('input');
			var arrUrl=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
			var num=0;
			var oBody=document.body;
			//定时器
			var timer=null;
			aBtn[0].onclick=function(){
				//防止多次点击
				clearInterval(timer);
				timer=setInterval(function(){
					//更换背景图片
					oBody.style.background='url('+arrUrl[num]+')';
					//每次循环增加1,(数组图片,1~2~3~4)
					num++;
					//判断他的长度是否等于数组的长度
					num%=arrUrl.length;
					
				},1000);
			}
			
			aBtn[1].onclick=function(){
				clearInterval(timer);
			}
		</script>

</html>

Lvdon9

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript定时器切换背景

&lt;!DOCTYPE HTML&gt;&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫