Moment.js如何實(shí)現(xiàn)多個(gè)同時(shí)倒計(jì)時(shí)

這篇文章將為大家詳細(xì)講解有關(guān)Moment.js如何實(shí)現(xiàn)多個(gè)同時(shí)倒計(jì)時(shí)，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

具體內(nèi)容如下

第一步：

首先項(xiàng)目中需要引入moment.js。安裝方法如下：

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

安裝成功之后引入到項(xiàng)目中：

import moment from 'moment'

第二步：

在mounted中添加一個(gè)方法：

//定義一個(gè)立即執(zhí)行的函數(shù)
      (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默認(rèn)時(shí)間戳為毫秒,需要轉(zhuǎn)化成秒
              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));
              //這里可以做一個(gè)格式化的處理,甚至做毫秒級(jí)的頁(yè)面渲染,基于DOM操作,太多個(gè)倒計(jì)時(shí)一起會(huì)導(dǎo)致頁(yè)面性能下降
              document.getElementById(id).innerHTML = d + '天' + h + '小時(shí)' + m + '分鐘' + s + '秒';
              _ticts.time -= 1000;
              if (_ticts.time < 0)
                ticts.deleteTicts(id);//判斷是否到期,到期后自動(dòng)刪除定時(shí)器
            }, 1000)
          }
        };
        Ticts.prototype.deleteTicts = function(id) {
          clearInterval(this.ticts[id].interval);//清楚定時(shí)器的方法,需要定時(shí)器的指針作為參數(shù)傳入clearInterval
          delete this.ticts[id];//通過(guò)delete的方法刪除對(duì)象中的屬性
        };
        //新建一個(gè)ticts對(duì)象,放到window全局函數(shù)中,那么在html頁(yè)面是(或者其他js文件)可以訪(fǎng)問(wèn)該對(duì)象
        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");

第三步：

添加標(biāo)簽展示倒計(jì)時(shí)內(nèi)容

<div><span>距離端午假期還有：</span><span id="time1"></span></div>
<br>
<div><span>距離中秋假期還有：</span><span id="time2"></span></div>
<br>
<div><span>距離國(guó)慶假期還有：</span><span id="time3"></span></div>

最終效果：

關(guān)于“Moment.js如何實(shí)現(xiàn)多個(gè)同時(shí)倒計(jì)時(shí)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。