利用moment為基礎,基於DOM實現一個多個倒計時同時進行的js庫方便使用

moment非常強大,提供了很多時間方法的封裝,項目需要一個小倒計時的功能,網上找了很多不合適,決定自己寫一個,直接上代碼

//定義一個立即執行的函數
(function () {
    var Ticts=function Ticts() {
        this.ticts = {};
    };
    Ticts.prototype.createTicts=function(id, dealline) {
        var ticts=this;
        var time=moment(dealline).diff(moment());
        var _ticts=this.ticts[id] = {
            dealine: dealline
            , id: id
            , time: time
            , interval: setInterval(function () {
                var t = null;
                var d = null;
                var h = null;
                var m = null;
                var s = null;
　　　　　　　　　//js預設時間戳為毫秒,需要轉化成秒
                t = _ticts.time / 1000;
                d = Math.floor(t / (24 * 3600));
                h = Math.floor((t - 24 * 3600 * d) / 3600);
                m = Math.floor((t - 24 * 3600 * d - h * 3600) / 60);
                s = Math.floor((t - 24 * 3600 * d - h * 3600 - m * 60));
　　　　　　　　　//這裡可以做一個格式化的處理,甚至做毫秒級的頁面渲染,基於DOM操作,太多個倒計時一起會導致頁面性能下降
                document.getElementById(id).innerHTML = d + '天' + h + '小時' + m + '分鐘' + s + '秒';
                _ticts.time -= 1000;
                if (_ticts.time < 0)
　　　　　　　　　　　ticts.deleteTicts(id);//判斷是否到期,到期後自動刪除定時器
            }, 1000)
        }
    };
    Ticts.prototype.deleteTicts = function(id) {
        clearInterval(this.ticts[id].interval);//清楚定時器的方法,需要定時器的指針作為參數傳入clearInterval
        delete this.ticts[id];//通過delete的方法刪除對象中的屬性
    };
   //新建一個ticts對象,放到window全局函數中,那麼在html頁面是(或者其他js文件)可以訪問該對象
    window.Ticts=new Ticts();
})();

用法:

html頁面首先要引入moment才能使用我上面的方法

    <script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>

假設HTML里要放入倒計時的地方在這裡

                    <div id="aaa"></div>
                    <div id="aaa1"></div>
                    <div id="aaa2"></div>

頁面上可以寫js:

    Ticts.createTicts("aaa","2017-1-20 20:20:20");
    Ticts.createTicts("aaa1","2017-1-22 20:20:20");
    Ticts.createTicts("aaa2","2017-1-23 20:20:20");

看官們外觀可以修改上述代碼去做出你自己的風格,以上內容包含一些JS的特性,有很多新手對JS不熟不瞭解一些JS的機制例如原型鏈\this指針\作用域等等這些,這也是給新手們一個很好的學習範例