JavaScript倒計時在Web中用得非常廣泛,比如常見的團購啊、還有什麼值得期待的事情,都可以用到倒計時。現在舉了四個例子,比如時間長的倒計時,小時倒計時,最簡的倒計時,還有秒錶等等,應該可以滿足大部分需求。
1. 比較長時間的倒計時
離年還有:
<script type="text/javascript"> startclock();var timerID = null; var timerRunning = false; function showtime() { Today = new Date();var year = Today.getFullYear();document.getElementById("next_yeat").innerHTML = year + 1;var NowHour = Today.getHours(); var NowMinute = Today.getMinutes(); var NowMonth = Today.getMonth(); var NowDate = Today.getDate(); var NowYear = Today.getYear(); var NowSecond = Today.getSeconds(); if (NowYear <2000) NowYear=1900+NowYear; Today = null; Hourleft = 23 - NowHour Minuteleft = 59 - NowMinute Secondleft = 59 - NowSecond Yearleft = year - 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; } var timerID = null; var timerRunning = false; function stopclock () { if(timerRunning) clearTimeout(timerID); timerRunning = false; } function startclock () { stopclock(); showtime(); } // --> </script> 2. 小時倒計時(短時間倒計時)
<script type="text/javascript"> <!-- //一個小時,按秒計算,可以自己調整時間var maxtime = 60*60 function CountDown(){ 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>3. 最簡倒計時
<script Language="JavaScript"> <!-- Begin var timedate= new Date("January 14,2012"); var times="2012"; var now = new Date(); var date = timedate.getTime() - now.getTime(); var time = Math.floor(date / (1000 * 60 * 60 * 24)); if (time >= 0) ; document.write("<p>現在離 "+times+" 還有: <b>"+time +"</b> 天</p>"); // End --> </script> 4. 秒錶功能
00:01:11:00
<script type="text/javascript"> var normalelapse = 100; var nextelapse = normalelapse; var counter; var startTime; var start = clock.innerText; var finish = "00:00:00:00"; var timer = null; // 開始運行 function run() { startB.disabled = true; endB.disabled = false; counter = 0; // 初始化開始時間 startTime = new Date().valueOf(); // nextelapse是定時時間, 初始時為100毫秒 // 注意setInterval函數: 時間逝去nextelapse(毫秒)後, onTimer才開始執行 timer = window.setInterval("onTimer()", nextelapse); } // 停止運行 function stop() { startB.disabled = false; endB.disabled = true; window.clearTimeout(timer); } window.onload = function() { endB.disabled = true; } // 倒計時函數 function onTimer() { if (start == finish) { window.clearInterval(timer); alert("time is up!"); return; } var hms = new String(start).split(":"); var ms = new Number(hms[3]); var s = new Number(hms[2]); var m = new Number(hms[1]); var h = new Number(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; } } var ms = ms < 10 ? ("0" + ms) : ms; var ss = s < 10 ? ("0" + s) : s; var sm = m < 10 ? ("0" + m) : m; var sh = h < 10 ? ("0" + h) : h; start = sh + ":" + sm + ":" + ss + ":" + ms; clock.innerText = start; // 清除上一次的定時器 window.clearInterval(timer); // 自校正系統時間得到時間差, 並由此得到下次所啟動的新定時器的時間nextelapse counter++; var counterSecs = counter * 100; var elapseSecs = new Date().valueOf() - startTime; var diffSecs = 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>