Javascript定时器案例

最新推荐文章于 2024-03-29 16:37:35 发布

前端程序员路易

最新推荐文章于 2024-03-29 16:37:35 发布

阅读量239

点赞数

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_46582421/article/details/122013368

版权

javascript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

<!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 = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
				
				//创建一个变量，用来保存当前图片的索引
				var index = 0;
				
				//定义一个变量，用来保存定时器的标识
				var timer;
				
				//为btn01绑定-个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					
					/*
					目前，我们每点击一次按钮，就会开启一个定时器，
					点击多次就会开启多个定时器，这就导致图片的切换速度过快，
					并且我们只能关闭最后一次开启的定时器

					*/
				    
					//在开启定时器之前，需要将当前元素上的其他定时器关闭
					clearInterval(timer);

					
				    /*
					开启一个定时器，来自动切换图片
					*/
					timer = setInterval(function(){
						//使索引自增
						index++;
									
						//判断索引是否超过最大索引
						//第一种写法
						/*
						if(index >= imgArr.length){
							//则将index设置为0
							index = 0;
						}
						*/
						//第二种写法
						index %= imgArr.length;
									
						//修改img1的src属性
						img1.src = imgArr[index];
					},1000); 
				};
				
				//为btn02绑定-个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//点击按钮以后，停止图片的自动切换，关闭定时器
					/*
					 * clearInterval()可以接收任意参数，
					 * 	如果参数是一个有效的定时器的标识，则停止对应的定时器
					 * 	如果参数不是一个有效的标识，则什么也不做
					 */
					clearInterval(timer);
					
				};
				

			};
		</script>
	</head>
	<body>
		<img id="img1" src="images/1.jpg" />
		<br/> <br/>
		<button id="btn01">开始</button>
		<br/> <br/>
		<button id="btn02">结束</button>
	</body>
</html>

效果：
在这里插入图片描述

前端程序员路易

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Javascript定时器案例

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* 使图片可以自动切换 */ //获取img标签 var img1 = document.get
复制链接

扫一扫

专栏目录