jQuery簡單倒計時插件

 

一、 效果預覽 

二、 實現

1. 按照特定的類結構布局。

2. 需要先引入jQuery，再引入此文件。

/**
 * Author： CC11001100
 * 
 * 簡單倒計時
 * 
 *  1. 支持頁面內同時存在多個計時器並且不互相干擾
 *  2. 支持多種格式，比如可以省略天、小時...等等，前面省略會自動加到后面，最多可以只有秒
 *  3. 倒計時可以是秒數，可以是時間戳，可以是日期時間（設置一種即可）
 *
 * Usage:
 * 
 *         <div class="timer-simple-seconds" timer="3600" timestamp="1482737420000" datetime="2016-12-26 15:30:20">
 *            <span class="day">0</span>天
 *             <span class="hour">00</span>時
 *             <span class="minute">00</span>分
 *             <span class="second">00</span>秒
 *        </div>
 *
 */
/**
 * 按結構查找，依賴結構和class
 */
$(function(){
    
    //對所有的計時器進行處理
    var timers=$(".timer-simple-seconds");
    for(var i=0;i<timers.length;i++){
        var timer=$(timers[i]);
        
        if(timer.attr("timestamp")){
            //如果是時間戳，則預處理一下時間為倒計時秒數
            prepareProcessTimestamp2Timer(timer);
        }else if(timer.attr("datetime")){
            //處理時間格式為倒計時秒數
            prepareProcessDatetime2Timer(timer);
        }
        //先調用一次，避免誤差
        processTimer(timer);
        setInterval(processTimer,1000,timer);
    }
    
    /**
     * doWhat: 這個函數將時間戳預處理成統一的倒計時描述
     * 
     * 對時間做一個預處理，因為如果服務器直接返回剩余的描述的話從服務器相應到客戶端雖然短到幾百毫秒但總是會有偏差的，這樣子不太好
     * 所以服務器只需要設置一個時間戳表示到哪里停止就可以了
     */
    function prepareProcessTimestamp2Timer(timer){
        var total=parseInt(timer.attr("timestamp"));
        total=Math.round(total/1000);
        var now=new Date().getTime()/1000;
        timer.attr("timer",total-now);
    }
    
    /**
     * 將日期時間格式轉為倒計時格式
     */
    function prepareProcessDatetime2Timer(timer){
        var timestamp=new Date(timer.attr("datetime")).getTime();
        timer.attr("timestamp",timestamp);
        prepareProcessTimestamp2Timer(timer);
    }
    
    /**
     * 倒計時，滴答滴答...
     * @param {Object} timer
     */
    function processTimer(timer){
        var total=parseInt(timer.attr("timer"));
        var t=total;
        
        //倒計時不能為負
        if(total<0) return; //TODO 后續版本加上計時完畢可以回調函數
        
        //找到顯示時間的元素
        var day=timer.find(".day");
        var hour=timer.find(".hour");
        var minute=timer.find(".minute");
        var second=timer.find(".second");
        
        //刷新計時器顯示的值
        if(day.length){
            var d=Math.floor(t/(60*60*24));
            day.text(d);
            t-=d*(60*60*24);
        }
        if(hour.length){
            var h=Math.floor(t/(60*60));
            hour.text((h<10?"0":"")+h);
            t-=h*(60*60);
        }
        if(minute.length){
            var m=Math.floor(t/60);
            minute.text((m<10?"0":"")+m);
            t-=m*60;
        }
        if(second.length){
            second.text((t<10?"0":"")+t);
        }
        
        //一秒過去了...
        total--;
        timer.attr("timer",total);
    }
    
});

 

說明：

1. timer表示剩余的秒數，timestamp表示一個未來的unix時間戳，datetime表示一個yyyy-MM-dd HH:mm:ss格式的字符串表示的時間。

2. 三者只設置一個即可，同時設置會沖突的。

 

 

 github地址： https://github.com/BenDanChen/simpleTimer