比較全的JavaScript倒計時指令碼

來源:互聯網
上載者:User

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>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.