首頁 > 開發者 > JavaScript

執行個體講解多個js毫秒倒計時同時進行效果，執行個體講解js

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

執行個體講解多個js毫秒倒計時同時進行效果，執行個體講解js

本文執行個體講解js毫秒倒計時同時進行效果的代碼，分享給大家供大家參考，具體內容如下

：

實現功能：調用一個函數，傳入html元素的id，和一個截止時間（unix時間戳記），在該html元素中列印出到當前到截止時間為止的倒計時,精確到毫秒；

如下：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">    <title></title>    <style>      div{        width: 100%;        height: 50px;        margin-bottom: 5px;        background: yellowgreen;      }    </style>  </head>  <body>        <h2>毫秒的倒計時</h2>    <div id="timer1"></div>    <div id="timer2"></div>    <div id="timer3"></div>    <div id="timer4"></div>    <script>      var addTimer = function(){        var list = [],          interval;                  return function(id,timeStamp){          if(!interval){            interval = setInterval(go,1);          }          list.push({ele:document.getElementById(id),time:timeStamp});        }                function go() {           for (var i = 0; i < list.length; i++) {             list[i].ele.innerHTML = changeTimeStamp(list[i].time);             if (!list[i].time)               list.splice(i--, 1);           }         }        //傳入unix時間戳記，得到倒計時        function changeTimeStamp(timeStamp){          var distancetime = new Date(timeStamp*1000).getTime() - new Date().getTime();          if(distancetime > 0){ 　　　　　　　　　　　　　　//如果大於0.說明尚未到達截止時間                   var ms = Math.floor(distancetime%1000);            var sec = Math.floor(distancetime/1000%60);            var min = Math.floor(distancetime/1000/60%60);            var hour =Math.floor(distancetime/1000/60/60%24);                        if(ms<100){              ms = "0"+ ms;            }            if(sec<10){              sec = "0"+ sec;            }            if(min<10){              min = "0"+ min;            }            if(hour<10){              hour = "0"+ hour;            }                        return hour + ":" +min + ":" +sec + ":" +ms;          }else{　　　　　　　　　　　　　　//若否，就是已經到截止時間了            return "已截止！"          }          }              }();            addTimer("timer1",1451923200);//1月5日00點，unix時間戳記自己去百度一下，就有的      addTimer("timer2",1451926800);//1月5日01點      addTimer("timer3",1451930400);//1月5日02點      addTimer("timer4",1452020400);//1月6日03點    </script>      </body></html>

如何使用這個函數？

addTimer("#id",時間戳記int); 

PS:

其實這個函數有一個小小的問題：就是並不會顯示截止天數；因為老闆表示我們的倒計時時間最多也就幾個小時,所以在判斷倒計時的小時和天數上，我也就懶得寫那麼多了。所以如果傳入的時間戳記距今超過了1天。那麼你會看到如此結果：02:11:32:874~~只剩2個小時了！明顯不對是不是？

so，有2個方案這裡：

方法1：把var hour =Math.floor(distancetime/1000/60/60%24);改成var hour =Math.floor(distancetime/1000/60/60);

　　　　如果截止時間距今超出一天了，小時位置會顯示大於24的數字；比如：36:45:22:888

方法2：你自己再寫一個計算天數的變數；

以上就是本文的全部內容，希望對大家的學習有所協助。

您可能感興趣的文章:
  • javascript秒數倒計時自動跳轉代碼
  • JS 倒計時實現代碼(時、分，秒)
  • Javascript倒計時代碼
  • js實現點擊註冊按鈕開始讀秒倒計時的小例子
  • js倒計時小程式
  • js幾秒以後倒計時跳轉樣本
  • js實現網頁倒計時、網站已已耗用時間功能的代碼3例
  • 簡單易用的倒計時js代碼
  • JS倒計時代碼匯總
  • js實現發送驗證碼後的倒計時功能

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More