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

2019-11-19 10:57:44

字體：大中小

供稿：網(wǎng)友

本文實(shí)例為大家分享了Moment.js實(shí)現(xiàn)多個(gè)同時(shí)倒計(jì)時(shí)的具體代碼，供大家參考，具體內(nèi)容如下

第一步：

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

bower install moment --save # bowernpm 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文件)可以訪問(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>

最終效果：