Window对象提供的功能之定时操作
定时操作函数有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>