JavaScipt实现倒计时方法总结

来源：互联网发布：steam免费mac游戏推荐编辑：程序博客网时间：2024/06/04 18:14

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

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

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

clearTimeout（t）函数可以清除setTimeout（）函数的计时信息，停止计时。

60秒倒计时代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title></head><body onload="CountTime()"><div id = "timeBar" style="font-size:22px;" align="center"></div> <script type = "text/javascript" src = "CountTime.js"></script></body></html>

time = 60;function CountTime(){document.getElementById("timeBar").innerHTML = time;time = time - 1;if ( time == -1){clearTimeout(t);}else{t = setTimeout("CountTime()",1000);}}

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

clearInterval（t）方法是用来清除计时信息，终止计时程序。

可实现60秒倒计时代码如下（Html代码共用第一部分）：

time = 60;function SetText(){document.getElementById("timeBar").innerHTML = time;time = time - 1;if ( time == -1){clearInterval(t);}}function CountTime(){t = setInterval("SetText()",1000);}

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