JS常用倒计时代码实例总结
本文实例总结了JS常用倒计时代码。分享给大家供大家参考，具体如下：
第一种：精确到秒的javascript倒计时代码
<formname="form1">
<divalign="center"align="center">
<center>离2010年还有:<br>
<inputtype="textarea"name="left"size="35"style="text-align:center">
</center>
</div>
</form>
<scriptLANGUAGE="javascript">
startclock()
vartimerID=null;
vartimerRunning=false;
functionshowtime(){
Today=newDate();
varNowHour=Today.getHours();
varNowMinute=Today.getMinutes();
varNowMonth=Today.getMonth();
varNowDate=Today.getDate();
varNowYear=Today.getYear();
varNowSecond=Today.getSeconds();
if(NowYear<2000)
NowYear=1900+NowYear;
Today=null;
Hourleft=23-NowHour
Minuteleft=59-NowMinute
Secondleft=59-NowSecond
Yearleft=2009-NowYear
Monthleft=12-NowMonth-1
Dateleft=31-NowDate
if(Secondleft<0)
{
Secondleft=60+Secondleft;
Minuteleft=Minuteleft-1;
}
if(Minuteleft<0)
{
Minuteleft=60+Minuteleft;
Hourleft=Hourleft-1;
}
if(Hourleft<0)
{
Hourleft=24+Hourleft;
Dateleft=Dateleft-1;
}
if(Dateleft<0)
{
Dateleft=31+Dateleft;
Monthleft=Monthleft-1;
}
if(Monthleft<0)
{
Monthleft=12+Monthleft;
Yearleft=Yearleft-1;
}
Temp=Yearleft+'年,'+Monthleft+'月,'+Dateleft+'天,'+Hourleft+'小时,'+Minuteleft+'分,'+Secondleft+'秒'
document.form1.left.value=Temp;
timerID=setTimeout("showtime()",1000);
timerRunning=true;
}
vartimerID=null;
vartimerRunning=false;
functionstopclock(){
if(timerRunning)
clearTimeout(timerID);
timerRunning=false;
}
functionstartclock(){
stopclock();
showtime();
}
//-->
</script>
第二种：某某运动会
<!--倒计时Javascriptbegin-->
<scriptlanguage="JavaScript">
<!--
functionDigitalTime1()
{
vardeadline=newDate("08/13/2007")//开幕倒计时
varsymbol="8月13日"
varnow=newDate()
vardiff=-480-now.getTimezoneOffset()//是北京时间和当地时间的时间差
varleave=(deadline.getTime()-now.getTime())+diff*60000
varday=Math.floor(leave/(1000*60*60*24))
varhour=Math.floor(leave/(1000*3600))-(day*24)
varminute=Math.floor(leave/(1000*60))-(day*24*60)-(hour*60)
varsecond=Math.floor(leave/(1000))-(day*24*60*60)-(hour*60*60)-(minute*60)
vardeadline_2=newDate("08/13/2004")//开幕后计时
varsymbol_2="8月13日"
varnow_2=newDate()
vardiff_2=-480-now.getTimezoneOffset()//是北京时间和当地时间的时间差
varleave_2=(now_2.getTime()-deadline_2.getTime())+diff_2*60000
varday_2=Math.floor(leave_2/(1000*60*60*24))
varhour_2=Math.floor(leave_2/(1000*3600))-(day_2*24)
varminute_2=Math.floor(leave_2/(1000*60))-(day_2*24*60)-(hour_2*60)
varsecond_2=Math.floor(leave_2/(1000))-(day_2*24*60*60)-(hour_2*60*60)-(minute_2*60)
day=day+1;
day_2=day_2+1;
if(day>0)//还未开幕
{
//LiveClock1.innerHTML="现在"+symbol+"天"
LiveClock1.innerHTML="<font
setTimeout("DigitalTime1()",1000)
}
if(day<0)//已经开幕
{
//LiveClock1.innerHTML="现在离"+symbol+"还有"+day+"天"+hour+"小时"+minute+"分"+second+"秒"
LiveClock1.innerHTML="<font
setTimeout("DigitalTime1()",1000)
}
if(day==0)//正在开幕
{
//LiveClock1.innerHTML="现在"+symbol+"天"
LiveClock1.innerHTML="<font
setTimeout("DigitalTime1()",1000)
}
if(day<0&day_2>19)//某某运动会结束
{
//LiveClock1.innerHTML="现在离"+symbol+"还有"+day+"天"+hour+"小时"+minute+"分"+second+"秒"
LiveClock1.innerHTML="<font
setTimeout("DigitalTime1()",1000)
}
}
//-->
</script>
<!--倒计时Javascriptend-->
<bodyonload=DigitalTime1()>
<divid=LiveClock1></div>
</body>
第三种：小时倒计时
<SCRIPTLANGUAGE="JavaScript">
<!--
varmaxtime=60*60//一个小时，按秒计算，自己调整!
functionCountDown(){
if(maxtime>=0){
minutes=Math.floor(maxtime/60);
seconds=Math.floor(maxtime%60);
msg="距离结束还有"+minutes+"分"+seconds+"秒";
document.all["timer"].innerHTML=msg;
if(maxtime==5*60)alert('注意，还有5分钟!');
--maxtime;
}
else{
clearInterval(timer);
alert("时间到，结束!");
}
}
timer=setInterval("CountDown()",1000);
//-->
</SCRIPT>
<divid="timer"style="color:red"></div>
第四种：最简倒计时
<ScriptLanguage="JavaScript">
<!--Begin
vartimedate=newDate("January14,2006");
vartimes="研究生考试";
varnow=newDate();
vardate=timedate.getTime()-now.getTime();
vartime=Math.floor(date/(1000*60*60*24));
if(time>=0);
document.write("<li><fontcolor=#DEDBDE>现在离2006年"+times+"还有:<fontcolor=#ffffff><b>"+time+"</b></font>天</font></li>");
//End-->
</Script>
第五种：最简倒计时二
<scriptlanguage="JavaScript"type="text/javascript">
functiondjs(){
varurodz=newDate("11/12/2008");
varnow=newDate();
varnum
varile=urodz.getTime()-now.getTime();
vardni=Math.floor(ile/(1000*60*60*24));
if(dni>1)
num=dni+1
elseif(dni==1)num=2
elseif(dni==0)num=1
elsenum=0
document.write(num)
}
</script>
距某某开幕式还有[<scriptlanguage="JavaScript"type="text/javascript">djs()</script>]天
第五个：Javascript倒计时器-采用系统时间自校验
这次利用系统时间自校验倒计时,无需手工调校使得倒计时更为精确,代码及详细注释如下:
<spanid="clock">00:01:11:00</span>
<inputid="startB"type="button"value="startcountdown!"onclick="run()">
<inputid="endB"type="button"value="stopcountdown!"onclick="stop()">
<br>
<inputid="diff"type="text">
<inputid="next"type="text">
<scriptlanguage="Javascript">
varnormalelapse=100;
varnextelapse=normalelapse;
varcounter;
varstartTime;
varstart=clock.innerText;
varfinish="00:00:00:00";
vartimer=null;
//开始运行
functionrun(){
startB.disabled=true;
endB.disabled=false;
counter=0;
//初始化开始时间
startTime=newDate().valueOf();
//nextelapse是定时时间,初始时为100毫秒
//注意setInterval函数:时间逝去nextelapse(毫秒)后,onTimer才开始执行
timer=window.setInterval("onTimer()",nextelapse);
}
//停止运行
functionstop(){
startB.disabled=false;
endB.disabled=true;
window.clearTimeout(timer);
}
window.onload=function(){
endB.disabled=true;
}
//倒计时函数
functiononTimer()
{
if(start==finish)
{
window.clearInterval(timer);
alert("timeisup!");
return;
}
varhms=newString(start).split(":");
varms=newNumber(hms[3]);
vars=newNumber(hms[2]);
varm=newNumber(hms[1]);
varh=newNumber(hms[0]);
ms-=10;
if(ms<0)
{
ms=90;
s-=1;
if(s<0)
{
s=59;
m-=1;
}
if(m<0)
{
m=59;
h-=1;
}
}
varms=ms<10?("0"+ms):ms;
varss=s<10?("0"+s):s;
varsm=m<10?("0"+m):m;
varsh=h<10?("0"+h):h;
start=sh+":"+sm+":"+ss+":"+ms;
clock.innerText=start;
//清除上一次的定时器
window.clearInterval(timer);
//自校验系统时间得到时间差,并由此得到下次所启动的新定时器的时间nextelapse
counter++;
varcounterSecs=counter*100;
varelapseSecs=newDate().valueOf()-startTime;
vardiffSecs=counterSecs-elapseSecs;
nextelapse=normalelapse+diffSecs;
diff.value=counterSecs+"-"+elapseSecs+"="+diffSecs;
next.value="nextelapse="+nextelapse;
if(nextelapse<0)nextelapse=0;
//启动新的定时器
timer=window.setInterval("onTimer()",nextelapse);
}
</script>
PS：这里再为大家推荐几款时间及计时器相关工具供大家参考使用：
在线秒表工具：
http://tools.jb51.net/bianmin/miaobiao
Unix时间戳(timestamp)转换工具：
http://tools.jb51.net/code/unixtime
在线世界各地时间查询：
http://tools.jb51.net/zhuanhuanqi/worldtime
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript时间与日期操作技巧总结》《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。