利用moment为基础,基于DOM实现一个多个倒计时同时进行的js库方便使用

时间：2023-07-25 15:40:44

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指针\作用域等等这些,这也是给新手们一个很好的学习范例

相关文章