JavaScript实现简单的数字倒计时
这里是一个JavaScript中显示倒计时的方法，从10一秒一秒地往下减直到计时结束（即0），代码如下：
runCount(10);
functionrunCount(t){
if(t>0){
document.getElementById(‘shownum').innerHTML=t;
t–;
setTimeout(function(){runCount(t);},1000);
}else{
document.getElementById(‘shownum').innerHTML=‘倒计时结束！';
}
}
运行该js代码前，需要先添加一个id为shownum的div。
js实现动态倒计时功能*a是从后台接收到的时间戳，需转换成毫秒单位
<div>
距明年还有:
<spanid='daya'></span>天
<spanid='hoursa'></span>小时
<spanid='minua'></span>分
<spanid='secoa'></span>秒
</div>
<scripttype="text/javascript">
/**
*
*copyrightWE2012.7
*js实现动态倒计时功能
*a是从后台接收到的时间戳，需转换成毫秒单位
*
*/
vara=12345678;//以毫秒为单位
functionfomtime()
{
a=a-1000;
varb=newDate();
b.setTime(0);
varc=newDate();
c.setTime(a);
varday1=b.getDate();//为方便调用，把天数、小时等单独定义
varhours1=b.getHours();
varminu1=b.getMinutes();
varseco1=b.getSeconds();
varday2=c.getDate();
varhours2=c.getHours();
varminu2=c.getMinutes();
varseco2=c.getSeconds();
varday=day2-day1;
varhours=hours2-hours1;
varminu=minu2-minu1;
varseco=seco2-seco1;
document.getElementById('daya').innerHTML=day;
document.getElementById('hoursa').innerHTML=hours;
document.getElementById('minua').innerHTML=minu;
document.getElementById('secoa').innerHTML=seco;
setTimeout("fomtime()",1000);
}
fomtime();
</script>
按天倒计时
HTML代码1:
<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代码2:
<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倒计时代码
HTML代码:
<formname="form1">
<divalign="center"align="center">
<center>离2013年还有:<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>
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>
以上所述就是本文的全部内容了，希望大家能够喜欢。