你的位置:首页 > Java教程

[Java教程]Javascript进阶篇——浏览器对象—JavaScript计时器


---恢复内容开始---

JavaScript 计时器
在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。
计时器类型:
一次性计时器:仅在指定的延迟时间之后触发一次。
间隔性触发计时器:每隔一定的时间间隔就触发一次。
计时器方法:

 

 

 

计时器setInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
语法:

setInterval(代码,交互时间);//1. 代码:要调用的函数或要执行的代码串。//2. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。

返回值:
  一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。
  调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000)//或setInterval(clock,1000)

我们设置一个计时器,每隔100毫秒调用clock()函数,并将时间显示出来,代码如下:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>计时器</title> 6 <script type="text/javascript"> 7   var int=setInterval(clock, 100) 8   function clock(){ 9     var time=new Date();10     document.getElementById("clock").value = time;11   }12 </script>13 </head>14 <body>15   <form>16     <input type="text" id="clock" size="50" />17   </form>18 </body>19 </html>

例:定时器获取时间,格式"时:分:秒"

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>定时器</title><script type="text/javascript">  var attime;  function clock(){    var time=new Date();         attime= time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();    document.getElementById("clock").value = attime;  }  setInterval(clock);</script></head><body>  <form>    <input type="text" id="clock" size="50" />  </form></body></html>

运行结果:

 

 

 

取消计时器clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的交互时间。
语法:

clearInterval(id_of_setInterval)//参数说明://id_of_setInterval:由 setInterval() 返回的 ID 值。

每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时,停止时间,代码如下:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>计时器</title> 6 <script type="text/javascript"> 7   function clock(){ 8     var time=new Date();            9     document.getElementById("clock").value = time;10   }11   // 每隔100毫秒调用clock函数,并将返回值赋值给i12   var i=setInterval("clock()",100);13 </script>14 </head>15 <body>16   <form>17     <input type="text" id="clock" size="50" />18     <input type="button" value="Stop" onclick="clearInterval(i)" />19   </form>20 </body>21 </html>

 

 

 

计时器setTimeout()

setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:

setTimeout(代码,延迟时间);//参数说明://1. 要调用的函数或要执行的代码串。//2. 延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)。

当我们打开网页3秒后,在弹出一个提示框,代码如下:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script type="text/javascript"> 5   setTimeout("alert('Hello!')", 3000 ); 6 </script> 7 </head> 8 <body> 9 </body>10 </html>

当按钮start被点击时,setTimeout()调用函数,在5秒后弹出一个提示框。

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script type="text/javascript"> 5   function tinfo(){ 6     var t=setTimeout("alert('Hello!')",5000); 7   } 8 </script> 9 </head>10 <body>11   <form>12     <input type="button" value="start" onClick="tinfo()">13   </form>14 </body>15 </html>

要创建一个运行于无穷循环中的计数器,我们需要编写一个函数来调用其自身。在下面的代码,当按钮被点击后,输入域便从0开始计数。

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script type="text/javascript"> 5   var num=0; 6   function numCount(){ 7     document.getElementById('txt').value=num; 8     num=num+1; 9     setTimeout("numCount()",1000);10   }11 </script>12 </head>13 <body>14   <form>15     <input type="text" id="txt" />16     <input type="button" value="Start" onClick="numCount()" />17   </form>18 </body>19 </html>  

使用setTimeout()实现计数统计效果,并在文本框中显示数值。

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>计时器</title> 6 </head> 7 <script type="text/javascript"> 8   var num=0; 9   function startCount() {10     document.getElementById('count').value=num;11     num=num+1;12     setTimeout("startCount()",1000);13   }14   setTimeout("startCount()",1000);15 </script>16 </head>17 <body>18   <form>19     <input type="text" id="count"/>20   </form>21 </body>22 </html>

 

 

 

 

取消计时器clearTimeout()
setTimeout()clearTimeout()一起使用,停止计时器。
语法:

clearTimeout(id_of_setTimeout)//参数说明://id_of_setTimeout:由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

下面的例子和上节的无穷循环的例子相似。唯一不同是,现在我们添加了一个 "Stop" 按钮来停止这个计数器:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script type="text/javascript"> 5   var num=0,i; 6   function timedCount(){ 7     document.getElementById('txt').value=num; 8     num=num+1; 9     i=setTimeout(timedCount,1000);10   }11   setTimeout(timedCount,1000);12   //取消计时器,停止13   function stopCount(){14     clearTimeout(i);15   }16 </script>17 </head>18 <body>19   <form>20     <input type="text" id="txt">21     <input type="button" value="Stop" onClick="stopCount()">22   </form>23 </body>24 </html>

取消计时器。点击Start按钮后,开始计数。点击Stop按钮后,停止计数。

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>计时器</title> 6 </head> 7 <script type="text/javascript"> 8   var num=0; 9   var i;10   function startCount(){11   document.getElementById('count').value=num;12     num=num+1;13     i=setTimeout("startCount()",1000);14   }15   function stopCount(){16     clearTimeout(i);17   }18 </script>19 </head>20 <body>21   <form>22     <input type="text" id="count" />23     <input type="button" value="Start" onclick = startCount()/>24     <input type="button" value="Stop" onclick = stopCount()/>25   </form>26 </body>27 </html>