最全面的JS倒计时代码
本文实例为大家分享了JS倒计时展示的具体代码，供大家参考，具体内容如下
第一种：精确到秒的javascript倒计时代码
HTML代码:
<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>
第二种：某某运动会
HTML代码:
<!--倒计时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>
第三种：小时倒计时
HTML代码:
<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>
第四种：最简倒计时
HTML代码:
<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>
第五种：最简倒计时二
HTML代码:
<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">
/*Thisnoticemustbeuntouchedatalltimes.
countdown.jsv.1.0
Thelatestversionisavailableat
http://blog.csdn.net/yjgx007
Copyright(c)2004Xinyi.Chen.Allrightsreserved.
Created7/30/2004byXinyi.Chen.
Web:http://blog.csdn.net/yjgx007
E-Mail:chenxinyi1978@hotmail.com
Lastmodified:7/30/2004
Thisprogramisfreesoftware;
youcanredistributeitand/ormodifyitunderthetermsofthe
GNUGeneralPublicLicenseaspublishedbytheFreeSoftwareFoundation;
SeetheGNUGeneralPublicLicense
athttp://www.gnu.org/copyleft/gpl.htmlformoredetails.
*/
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>
附加一个完整的倒计时和时间 复制即可使用 运行的结果分别是：
天小时分秒2013年01月22日15:44:23星期二
<html>
<head>
<title>倒计时测试</title>
<scriptsrc="http://event.wushuangol.com/ShopClothes/Scripts/jquery-1.4.4.min.js"type="text/javascript"></script>
<scriptlanguage="JavaScript">
$(document).ready(function(){
<!--时间必须启动-->
clockon();
});
functionclockon(){
varnow=newDate();
varyear=now.getFullYear();//getFullYeargetYear
varmonth=now.getMonth();
vardate=now.getDate();
varday=now.getDay();
varhour=now.getHours();
varminu=now.getMinutes();
varsec=now.getSeconds();
varweek;
month=month+1;
if(month<10)month="0"+month;
if(date<10)date="0"+date;
if(hour<10)hour="0"+hour;
if(minu<10)minu="0"+minu;
if(sec<10)sec="0"+sec;
vararr_week=newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
week=arr_week[day];
vartime="";
time=year+"年"+month+"月"+date+"日"+""+hour+":"+minu+":"+sec+""+week;
$("#bgclock").html(time);
vartimer=setTimeout("clockon()",200);
}
<!--隐藏脚本从旧的浏览器
varDifferHour=-1
varDifferMinute=-1
varDifferSecond=-1
varTday1=newDate("Feb11,201300:00:00")//**倒计时时间-注意格式
vardaysms=24*60*60*1000
varhoursms=60*60*1000
varSecondms=60*1000
varmicrosecond=1000
functionclock()
{
vartime=newDate()
varhour=time.getHours()
varminute=time.getMinutes()
varsecond=time.getSeconds()
vartimevalue=""+((hour>12)?hour-12:hour)
timevalue+=((minute<10)?":0":":")+minute
timevalue+=((second<10)?":0":":")+second
timevalue+=((hour>12)?"PM":"AM")
varconvertHour=DifferHour
varconvertMinute=DifferMinute
varconvertSecond=DifferSecond
varDiffms=Tday1.getTime()-time.getTime()
DifferHour=Math.floor(Diffms/daysms)
Diffms-=DifferHour*daysms
DifferMinute=Math.floor(Diffms/hoursms)
Diffms-=DifferMinute*hoursms
DifferSecond=Math.floor(Diffms/Secondms)
Diffms-=DifferSecond*Secondms
vardSecs=Math.floor(Diffms/microsecond)
if(convertHour!=DifferHour)document.formnow.dd.value=DifferHour
if(convertMinute!=DifferMinute)document.formnow.hh.value=DifferMinute
if(convertSecond!=DifferSecond)document.formnow.mm.value=DifferSecond
document.formnow.ss.value=dSecs
document.formnow.ss.value=dSecs
//document.formnow.Tnow.value=DifferHourDifferMinute+DifferSecond+dSecs
setTimeout("clock()",1000)
}
//
隐藏-->
</script>
</head>
<bodyonload="clock();returntrue">
<!--显示出内容-->
<formname="formnow">
<inputname="dd"type="text"style="border:0;"size=2>
天
<inputname="hh"type="text"style="border:0;"size=2>
小时
<inputname="mm"type="text"style="border:0;"size=2>
分
<inputname="ss"type="text"style="border:0;"size=2>
秒
<spanid="bgclock"style="float:right;padding-right:10px;padding-top:2px;text="red""></span>
</form>
<!--倒计时完毕啦-->
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。<