当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Moment.js实现多个同时倒计时

Moment.js实现多个同时倒计时

2019年09月07日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了moment.js实现多个同时倒计时的具体代码，供大家参考，具体内容如下

第一步：

首先项目中需要引入moment.js。安装方法如下：

bower install moment --save # bower
npm install moment --save  # npm

安装成功之后引入到项目中：

import moment from 'moment'

第二步：

在mounted中添加一个方法：

//定义一个立即执行的函数
      (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();
      })();
 
      ticts.createticts("time1","2019-06-07 00:00:00");
      ticts.createticts("time2","2019-09-13 00:00:00");
      ticts.createticts("time3","2019-10-01 00:00:00");

第三步：

添加标签展示倒计时内容

<div><span>距离端午假期还有：</span><span id="time1"></span></div>
<br>
<div><span>距离中秋假期还有：</span><span id="time2"></span></div>
<br>
<div><span>距离国庆假期还有：</span><span id="time3"></span></div>

最终效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网