JavaScript中定时器的练习

最新推荐文章于 2025-03-07 10:47:55 发布

原创最新推荐文章于 2025-03-07 10:47:55 发布 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

js基础教程

这篇博客主要探讨了在JavaScript中使用定时器的技巧和实践，通过示例代码展示了如何实现图片轮播的效果，其中涉及到索引管理和数组循环的操作。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript">
		
		window.onload = function(){
			
			/*
			 * 使图片可以自动切换
			 */
			//获取img标签
			
			var img1 = document.getElementById("img1");
			
			//创建一个数组来保存图片的路径
			var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg"]
			
			//创建一个变量，用来保存当前图片的索引
			
			var index = 0;
			
			//创建一个变量timer
			var timer
			//为btn01绑定一个单击响应函数
			
			
			
			var btn01 = document.getElementById("btn01");
			btn01.onclick = function(){
				
				/*
				 * 目前，我们每点击一次按钮，就会开启一个定时器
				 *  点击多次就会开启多个定时器，这就导致图片的切换速度过快，
				 * 	并且我们只能关闭最后一次开启的定时器
				 * 
				 */
				
				/*
				 * 开启一个定时器，来自动切换图片
				 */
				//开启定时器之前，我们要把之前的当前元素的定时器关闭
				clearInterval(timer);
			
				timer = setInterval(function(){
				//使索引自增
				index++;
				
				//判断索引是否超过最大索引

// if(index>= imgArr.length){
// index = 0;
// };
index = index%imgArr.length;

				//修改img1的src属性
				img1.src = imgArr[index];
			},2000);
		};
		
		var btn02 = document.getElementById("btn02");
		btn02.onclick = function(){
			//点击按钮以后，停止图片的自动切换，关闭定时器
			/*
			 * clearInterval()可以接收任意参数
			 *  如果参数是一个有效的定时器的标识，则停止对应的定时器
			 *  如果参数不是一个有效的标识，则什么也不做
			 */
			clearInterval(timer);
		};
		};	
			
	</script>
</head>
<body>
	<img id = "img1" src="img/1.jpg"/>
	<br />
	<button id = "btn01">开始</button>
	<button id = "btn02">停止</button>
</body>
</html>

标签

#js #javascript