JS簡單的倒數計時(程式碼優化)

龍恩0707發表於2014-06-26
JS優化

倒數計時網上一大堆，所以也沒有什麼好說的，支援：1.年，月，日，天，時分秒等倒數計時。

JS程式碼如下：

/*
 * js簡單的倒數計時
 * @param {date,obj} 日期 物件格式
 */

 function CountDown(date,obj) {
    var self = this;
    self.date = date;
    self.obj = obj;
    self._init();
 };

 $.extend(CountDown.prototype,{
    
    _init: function(){
        var self = this,
            obj = self.obj;
        var dateTime = self._calculateTime();

        if(obj.sec) {
            $(obj.sec).html(dateTime.sec);
        }
        if(obj.mini) {
            $(obj.mini).html(dateTime.mini);
        }
        if(obj.hour) {
            $(obj.hour).html(dateTime.hour);
        }
        if(obj.day) {
            $(obj.day).html(dateTime.day);
        }
        if(obj.month) {
            $(obj.month).html(dateTime.month);
        }
        if(obj.year) {
            $(obj.year).html(dateTime.year);
        }
        // setInterval 會有誤差 大概每小時有5秒的誤差 故用setTimeout做計時器 精準更高 
        t && clearTimeout(t);
        var t = setTimeout(function(){
            self._init();
        }, 1000);
    },
    _zero: function(n){
        var n = parseInt(n,10);
        if(n > 0) {
            if(n < 10) {
                n = "0" + n;
            }
            return String(n);
        }else {
            return n = "00";
        }
    },
    _calculateTime: function(){
        var self = this,
            date = self.date || Date.UTC(2050, 0, 1);
        var end = new Date(date),
            now = new Date();

        // getTimezoneOffset() 方法可返回格林威治時間和本地時間之間的時差，以分鐘為單位。
        var leftTime = Math.round((end.getTime() - now.getTime())/1000) + end.getTimezoneOffset() * 60;
        var obj = {
            sec: "00",
            mini: "00",
            hour: "00",
            day: "00",
            month: "00",
            year: "0"
        };
        if(leftTime > 0) {
            obj.sec = self._zero(leftTime % 60);
            obj.mini = Math.floor(leftTime / 60) > 0 ? self._zero(Math.floor(leftTime / 60) % 60) : "00";
            obj.hour = Math.floor(leftTime / 3600) > 0 ? self._zero(Math.floor(leftTime/3600) % 24) : "00";
            obj.day = Math.floor(leftTime / (24 * 3600)) > 0 ? self._zero(Math.floor(leftTime / (24*3600)) % 30) : "00";
            obj.month = Math.floor(leftTime / (30 * 24 * 3600)) > 0 ? self._zero(Math.floor(leftTime / (30 * 24 * 3600)) % 12) : "00";
            //年份，按按回歸年360天秒算
            obj.year = Math.floor(leftTime / (360 * 30 * 24 * 3600)) > 0 ? Math.floor(leftTime / (360 * 30 * 24 * 3600)) : "0";
        }
        return obj;
    }
 });

假如HTML如下：

<span class="hour"></span>時 <span class="mini"></span>分 <span class="sec"></span>秒

那麼我們可以這樣初始化程式碼：

var d = 1419509471000;
    //var d = Date.UTC(2030, 6, 27, 16, 34);
var obj = {
    sec: $(".sec"),
    mini: $(".mini"),
     hour: $(".hour")
}
new CountDown(d, obj);

JSfiddler倒數計時演示

相關文章