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>

 

二、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>

 

 

posted @ 2010-01-31 12:04  MikeLin  阅读(441)  评论(0编辑  收藏  举报