案例:图片自动切换
在javascript中,程序的执行速度是非常快的,如果希望一段程序可以每间隔一段时间执行一次,那么可以使用定时调用。
setInterval()
可以将一个函数,每隔一段时间执行一次,接受两个参数:
- 第一个参数:回调函数,该函数会每隔一段时间被调用一次
- 第二个参数:每次调用间隔的时间,单位是毫秒
注意:setInterval()有一个返回值,会返回一个Number类型的数据,这个数据用来作为定时器的唯一标识
clearInterval()
用来关闭一个定时器,它可以接收任意参数,如果参数是一个有效的定时器的标识,则停止对应的定时器,如果参数不是一个有效的标识,则什么也不做。图片自动切换
现在我们来实现一个图片自动切换的功能,并且通过点击“开始”按钮和“停止”按钮可以分别控制图片开始切换和停止切换。一、分别创建一个img标签、一个“开始”按钮和一个“停止”按钮
1
2
3
4<img id="img" src="img/01.jpg">
<br>
<button id="btn01">开始</button>
<button id="btn02">停止</button>二、创建一个数组来保存图片的路径
1
2//创建一个数组来保存图片的路径
var imgArray = ['img/01.jpg','img/02.jpg','img/03.jpg','img/04.jpg'];三、创建一个变量,用来保存当前图片的索引
1
2//创建一个变量,用来保存当前图片的索引
var index = 0;四、定义一个变量,用来保存定时器的标识
1
2//定义一个变量,用来保存定时器的标识
var timer;五、分别获取img标签和两个按钮
1
2
3
4
5
6//获取img标签
var img = document.getElementById('img');
//获取开始按钮
var btn01 = document.getElementById('btn01');
//获取停止按钮
var btn02 = document.getElementById('btn02');六、为开始按钮绑定一个单击响应函数
1
2
3btn01.onclick = function (){
}七、开启一个定时器,来自动切换图片
1
2
3
4
5
6
7
8
9
10
11
12
13btn01.onclick = function (){
//开启一个定时器,来自动切换图片
timer = setInterval(function(){
//使索引自增
index++;
//判断索引是否超过最大索引
if(index >= imgArray.length){
index = 0;
}
//修改img的src属性
img.src = imgArray[index];
},1000)
}八、为停止按钮绑定一个单击响应函数,点击按钮以后,停止图片的自动切换,关闭定时器
虽然现在我们已经能实现图片自动切换,并且通过点击开始按钮和停止按钮能分别控制图片开始切换和停止切换,但还存在一个问题:就是目前,我们每点击一次按钮就会开启一个定时器,点击多次就会开启多个定时器,而我们默认只能关闭最后一次开启的定时器,这就导致图片的切换速度过快,因此,在开启定时器之前,我们需要将当前元素上的其他定时器关闭。1
2
3btn02.onclick = function(){
clearInterval(timer);
}完整的js代码:1
clearInterval(timer);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36<script>
window.onload = function(){
//创建一个数组来保存图片的路径
var imgArray = ['img/01.jpg','img/02.jpg','img/03.jpg','img/04.jpg'];
//创建一个变量,用来保存当前图片的索引
var index = 0;
//定义一个变量,用来保存定时器的标识
var timer;
//获取img标签
var img = document.getElementById('img');
//获取开始按钮
var btn01 = document.getElementById('btn01');
//获取停止按钮
var btn02 = document.getElementById('btn02');
//为开始按钮绑定一个单击响应函数
btn01.onclick = function () {
//在开启定时器之前,需要将当前元素上的其他定时器关闭
clearInterval(timer);
//开启一个定时器,来自动切换图片
timer = setInterval(function(){
//使索引自增
index++;
//判断索引是否超过最大索引
if(index >= imgArray.length){
index = 0;
}
//修改img的src属性
img.src = imgArray[index];
},1000)
}
//为停止按钮绑定一个单击响应函数,点击按钮以后,停止图片的自动切换,关闭定时器
btn02.onclick = function(){
clearInterval(timer);
}
}
</script>