定时操作函数有4个:
window.setInterval / window.clearInterval / window.setTimeout / window. clearTimeout
一、window.setInterval和window.clearInterval一起使用,用法如下:
代码
1
<
html
>
2 < head >
3 < title > counter </ title >
4 < script type ="text/javascript" >
5 // 定时器
6 var timer;
7
8 // 开始计数
9 function startCount() {
10 // timer将保存计数器的ID
11 timer = window.setInterval( function () {
12 // 从div中取得当前计数值
13 var div = document.getElementById( " counter " );
14 var num = Number(div.innerHTML);
15
16 // 计数值加1,更新页面
17 div.innerHTML = String(num + 1 );
18 }, 1000 );
19 }
20
21 // 停止计数
22 function pause() {
23 window.clearInterval(timer);
24 }
25 </ script >
26 </ head >
27 < body >
28 < div id ="counter" > 0 </ div >
29 < input type ="button" onclick ="startCount()" value ="start" />
30 < input type ="button" onclick ="pause()" value ="pause" />
31
32 </ br ></ br >
33 < div id ="content" >
34 window.setInterval 设置定时器,每隔一段时间执行指定的代码,用法如下:
35 windos.setInterval(code,interval);
36 其中code参数可以是一个函数,也可以是字符串形式的JavaScript代码,
37 interval参数是执行代码的时间间隔,单位是ms。
38 </ br ></ br >
39 setInterval函数在指定代码执行的同时返回一个定时器ID,
40 而clearInterval函数通过这个ID可以清除setInterval函数设置的定时器,
41 使代码不再继续定时执行。
42 </ div >
43 </ body >
44 </ html >
2 < head >
3 < title > counter </ title >
4 < script type ="text/javascript" >
5 // 定时器
6 var timer;
7
8 // 开始计数
9 function startCount() {
10 // timer将保存计数器的ID
11 timer = window.setInterval( function () {
12 // 从div中取得当前计数值
13 var div = document.getElementById( " counter " );
14 var num = Number(div.innerHTML);
15
16 // 计数值加1,更新页面
17 div.innerHTML = String(num + 1 );
18 }, 1000 );
19 }
20
21 // 停止计数
22 function pause() {
23 window.clearInterval(timer);
24 }
25 </ script >
26 </ head >
27 < body >
28 < div id ="counter" > 0 </ div >
29 < input type ="button" onclick ="startCount()" value ="start" />
30 < input type ="button" onclick ="pause()" value ="pause" />
31
32 </ br ></ br >
33 < div id ="content" >
34 window.setInterval 设置定时器,每隔一段时间执行指定的代码,用法如下:
35 windos.setInterval(code,interval);
36 其中code参数可以是一个函数,也可以是字符串形式的JavaScript代码,
37 interval参数是执行代码的时间间隔,单位是ms。
38 </ br ></ br >
39 setInterval函数在指定代码执行的同时返回一个定时器ID,
40 而clearInterval函数通过这个ID可以清除setInterval函数设置的定时器,
41 使代码不再继续定时执行。
42 </ div >
43 </ body >
44 </ html >
二、setTimeout和clearTimeout一起使用,用法如下:
代码
1
<
html
>
2 < head >
3 < title > counter </ title >
4 < script type ="text/javascript" >
5 // 定时器
6 var timer;
7
8 // 开始计数
9 function startCount() {
10 var div = document.getElementById( " counter " );
11 var num = Number(div.innerHTML);
12
13 div.innerHTML = String(num + 1 );
14 // 使用setTimeout实现多次定时操作的常见技巧是在startCount函数的最后,
15 // 通过setTimeout函数使startCount函数1s之后再次执行。
16 timer = window.setTimeout(startCount, 1000 );
17 }
18
19 // 停止计数
20 function pause() {
21 window.clearTimeout(timer);
22 }
23 </ script >
24 </ head >
25 < body >
26 < div id ="counter" > 0 </ div >
27 < input type ="button" onclick ="startCount()" value ="start" />
28 < input type ="button" onclick ="pause()" value ="pause" />
29
30 </ br ></ br >
31 < div id ="content" >
32 window.setTimeout 设置定时器,在一段时间之后执行指定的代码,用法如下:
33 window.setTimeout(code,time);
34 window.setTimeout与window.setInterval的区别在于setTimeout函数指定的代码仅执行一次。
35
36 </ br ></ br >
37 setTimeout函数在指定代码定时的同时返回一个定时器ID,
38 而clearTimeout函数通过这个ID可以清除setTimeout函数设置的定时器,
39 使代码不再继续定时执行。
40 </ div >
41 </ body >
42 </ html >
2 < head >
3 < title > counter </ title >
4 < script type ="text/javascript" >
5 // 定时器
6 var timer;
7
8 // 开始计数
9 function startCount() {
10 var div = document.getElementById( " counter " );
11 var num = Number(div.innerHTML);
12
13 div.innerHTML = String(num + 1 );
14 // 使用setTimeout实现多次定时操作的常见技巧是在startCount函数的最后,
15 // 通过setTimeout函数使startCount函数1s之后再次执行。
16 timer = window.setTimeout(startCount, 1000 );
17 }
18
19 // 停止计数
20 function pause() {
21 window.clearTimeout(timer);
22 }
23 </ script >
24 </ head >
25 < body >
26 < div id ="counter" > 0 </ div >
27 < input type ="button" onclick ="startCount()" value ="start" />
28 < input type ="button" onclick ="pause()" value ="pause" />
29
30 </ br ></ br >
31 < div id ="content" >
32 window.setTimeout 设置定时器,在一段时间之后执行指定的代码,用法如下:
33 window.setTimeout(code,time);
34 window.setTimeout与window.setInterval的区别在于setTimeout函数指定的代码仅执行一次。
35
36 </ br ></ br >
37 setTimeout函数在指定代码定时的同时返回一个定时器ID,
38 而clearTimeout函数通过这个ID可以清除setTimeout函数设置的定时器,
39 使代码不再继续定时执行。
40 </ div >
41 </ body >
42 </ html >