本文实例总结了常见的js倒计时代码。分享给大家供大家参考。具体汇总如下:
第一种:精确到秒的javascript倒计时代码
HTML代码:
<script language="javascript"> <br> startclock() <br> var timerID = null; <br> var timerRunning = false; <br> function showtime() { <br> Today = new Date(); <br> var NowHour = Today.getHours(); <br> var NowMinute = Today.getMinutes(); <br> var NowMonth = Today.getMonth(); <br> var NowDate = Today.getDate(); <br> var NowYear = Today.getYear(); <br> var NowSecond = Today.getSeconds(); <br> if (NowYear <2000) <br> NowYear=1900+NowYear; <br> Today = null; <br> Hourleft = 23 - NowHour <br> Minuteleft = 59 - NowMinute <br> Secondleft = 59 - NowSecond <br> Yearleft = 2009 - NowYear <br> Monthleft = 12 - NowMonth - 1<br> Dateleft = 31 - NowDate <br> if (Secondleft<0) <br> { <br> Secondleft=60+Secondleft; <br> Minuteleft=Minuteleft-1; <br> } <br> if (Minuteleft<0) <br> { <br> Minuteleft=60+Minuteleft; <br> Hourleft=Hourleft-1; <br> } <br> if (Hourleft<0) <br> { <br> Hourleft=24+Hourleft; <br> Dateleft=Dateleft-1; <br> } <br> if (Dateleft<0) <br> { <br> Dateleft=31+Dateleft; <br> Monthleft=Monthleft-1; <br> } <br> if (Monthleft<0) <br> { <br> Monthleft=12+Monthleft; <br> Yearleft=Yearleft-1; <br> } <br> Temp=Yearleft+'年, '+Monthleft+'月, '+Dateleft+'天, '+Hourleft+'小时, '+Minuteleft+'分, '+Secondleft+'秒'<br> document.form1.left.value=Temp; <br> timerID = setTimeout("showtime()",1000); <br> timerRunning = true; <br> } <br> var timerID = null; <br> var timerRunning = false; <br> function stopclock () { <br> if(timerRunning) <br> clearTimeout(timerID); <br> timerRunning = false; <br> } <br> function startclock () { <br> stopclock(); <br> showtime(); <br> } <br> // --> <br> </script>
第二种:某某运动会
HTML代码:
<script language="JavaScript"> <br> <!-- <br> function DigitalTime1() <br> { <br> var deadline= new Date("08/13/2007") //开幕倒计时 <br> var symbol="8月13日"<br> var now = new Date() <br> var diff = -480 - now.getTimezoneOffset() //是北京时间和当地时间的时间差 <br> var leave = (deadline.getTime() - now.getTime()) + diff*60000<br> var day = Math.floor(leave / (1000 * 60 * 60 * 24)) <br> var hour = Math.floor(leave / (1000*3600)) - (day * 24) <br> var minute = Math.floor(leave / (1000*60)) - (day * 24 *60) - (hour * 60) <br> var second = Math.floor(leave / (1000)) - (day * 24 *60*60) - (hour * 60 * 60) - (minute*60) <br> var deadline_2= new Date("08/13/2004") //开幕后计时 <br> var symbol_2="8月13日"<br> var now_2 = new Date() <br> var diff_2 = -480 - now.getTimezoneOffset() //是北京时间和当地时间的时间差 <br> var leave_2 = (now_2.getTime() - deadline_2.getTime()) + diff_2*60000<br> var day_2 = Math.floor(leave_2 / (1000 * 60 * 60 * 24)) <br> var hour_2 = Math.floor(leave_2 / (1000*3600)) - (day_2 * 24) <br> var minute_2 = Math.floor(leave_2 / (1000*60)) - (day_2 * 24 *60) - (hour_2 * 60) <br> var second_2 = Math.floor(leave_2 / (1000)) - (day_2 * 24 *60*60) - (hour_2 * 60 * 60) - (minute_2*60) <br> day=day+1; <br> day_2=day_2+1; <br> if (day>0) //还未开幕 <br> { <br> //LiveClock1.innerHTML = "现在"+symbol+"天" <br> LiveClock1.innerHTML = "<font<br> setTimeout("DigitalTime1()",1000) <br> } <br> if (day<0) //已经开幕 <br> { <br> //LiveClock1.innerHTML = "现在离"+symbol+"还有"+day+"天"+hour+"小时"+minute+"分"+second +"秒" <br> LiveClock1.innerHTML = "<font<br> setTimeout("DigitalTime1()",1000) <br> } <br> if (day==0) //正在开幕 <br> { <br> //LiveClock1.innerHTML = "现在"+symbol+"天" <br> LiveClock1.innerHTML = "<font<br> setTimeout("DigitalTime1()",1000) <br> } <br> <br> if (day<0 & day_2>19) //某某运动会结束 <br> { <br> //LiveClock1.innerHTML = "现在离"+symbol+"还有"+day+"天"+hour+"小时"+minute+"分"+second +"秒" <br> LiveClock1.innerHTML = "<font<br> setTimeout("DigitalTime1()",1000) <br> } <br> } <br> // --> <br> </script>
第三种:小时倒计时
HTML代码:
第四种:最简倒计时
HTML代码:
第五种:最简倒计时二
立即学习“Java免费学习笔记(深入)”;
HTML代码:
距某某开幕式还有 [<script language="JavaScript" type="text/javascript">djs()</script>] 天
第六个:Javascript倒计时器 - 采用系统时间自校验
这次利用系统时间自校验倒计时, 无需手工调校使得倒计时更为精确, 代码及详细注释如下:
<script language="Javascript"> <br> var normalelapse = 100; <br> var nextelapse = normalelapse; <br> var counter; <br> var startTime; <br> var start = clock.innerText; <br> var finish = "00:00:00:00"; <br> var timer = null; <br> // 开始运行 <br> function run() { <br> startB.disabled = true; <br> endB.disabled = false; <br> counter = 0; <br> // 初始化开始时间 <br> startTime = new Date().valueOf(); <br> // nextelapse是定时时间, 初始时为100毫秒 <br> // 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开始执行 <br> timer = window.setInterval("onTimer()", nextelapse); <br> } <br> // 停止运行 <br> function stop() { <br> startB.disabled = false; <br> endB.disabled = true; <br> window.clearTimeout(timer); <br> } <br> window.onload = function() { <br> endB.disabled = true; <br> } <br> // 倒计时函数 <br> function onTimer() <br> { <br> if (start == finish) <br> { <br> window.clearInterval(timer); <br> alert("time is up!"); <br> return; <br> } <br> var hms = new String(start).split(":"); <br> var ms = new Number(hms[3]); <br> var s = new Number(hms[2]); <br> var m = new Number(hms[1]); <br> var h = new Number(hms[0]); <br> ms -= 10; <br> if (ms < 0) <br> { <br> ms = 90; <br> s -= 1; <br> if (s < 0) <br> { <br> s = 59; <br> m -= 1; <br> } <br> if (m < 0) <br> { <br> m = 59; <br> h -= 1; <br> } <br> } <br> var ms = ms < 10 ? ("0" + ms) : ms; <br> var ss = s < 10 ? ("0" + s) : s; <br> var sm = m < 10 ? ("0" + m) : m; <br> var sh = h < 10 ? ("0" + h) : h; <br> start = sh + ":" + sm + ":" + ss + ":" + ms; <br> clock.innerText = start; <br> // 清除上一次的定时器 <br> window.clearInterval(timer); <br> // 自校验系统时间得到时间差, 并由此得到下次所启动的新定时器的时间nextelapse <br> counter++; <br> var counterSecs = counter * 100; <br> var elapseSecs = new Date().valueOf() - startTime; <br> var diffSecs = counterSecs - elapseSecs; <br> nextelapse = normalelapse + diffSecs; <br> diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs; <br> next.value = "nextelapse = " + nextelapse; <br> if (nextelapse < 0) nextelapse = 0; <br> // 启动新的定时器 <br> timer = window.setInterval("onTimer()", nextelapse); <br> } <br> </script>
希望本文所述对大家基于javascript的web程序设计有所帮助。











