JavaScipt实现倒计时方法总结

JavaScript中提供了两种实现计时、延时的方法,分别如下:

一、 t = setTimeout(“function()”, millisecond) 与 clearTimeout(t) 方法配套使用。

t = setTimeout(“function()”, millisecond) 方法中,function()函数里定义想要定时调用的代码,millisecond参数代表想要延迟的计时时间,t 是函数返回的ID值。此函数仅根据时间周期调用function()函数一次。但是可以通过递归调用,实现多次循环计时。

clearTimeout(t)函数可以清除setTimeout()函数的计时信息,停止计时。

60秒倒计时代码如下:

 

[html][/html] view plaincopy

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
  5. <title></title>
  6. </head>
  7. <body onload=”CountTime()”>
  8. <div id = “timeBar” style=”font-size:22px;” align=”center”></div>
  9. <script type = “text/javascript” src = “CountTime.js”></script>
  10. </body>
  11. </html>

 

[javascript][/javascript] view plaincopy

  1. time = 60;
  2. function CountTime()
  3. {
  4.     document.getElementById(“timeBar”).innerHTML = time;
  5.     time = time – 1;
  6.     if ( time == -1)
  7.     {
  8.         clearTimeout(t);
  9.     }
  10.     else
  11.     {
  12.         t = setTimeout(“CountTime()”,1000);
  13.     }
  14. }

二、t= setInterval(”function()“,millisecond)方法与setTimeout()使用方法类似,但是该函数是以设置的时间为周期,周期性的调用function()函数执行代码。

 

clearInterval(t)方法是用来清除计时信息,终止计时程序。

可实现60秒倒计时代码如下(Html代码共用第一部分):

 

[javascript][/javascript] view plaincopy

  1. time = 60;
  2. function SetText()
  3. {
  4.     document.getElementById(“timeBar”).innerHTML = time;
  5.     time = time – 1;
  6.     if ( time == -1)
  7.     {
  8.         clearInterval(t);
  9.     }
  10. }
  11. function CountTime()
  12. {
  13.         t = setInterval(“SetText()”,1000);
  14. }

以上两种方法均可实现倒计时的功能。

标签