js 多個倒計時,毫秒倒計時


其實主要是借鑒了了這篇文的寫法(http://tuzwu.iteye.com/blog/819081),俺稍作了修改,以便更適合我的需要:

實現功能:調用一個函數,傳入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:你自己再寫一個計算天數的變量;

 

(其實我覺得毫秒倒計時完全沒有必要,精確到秒就夠了嘛~毫秒這么快,簡直看得我眼瞎!)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM