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

本文实例为大家分享了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>

最终效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 一个不错的js html页面倒计时可精确到秒

    一个不错的js html页面倒计时可精确到秒,很简单,但和实用 <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <DIV id="CountMsg" class="HotDate"> <span id="t_d">00天</span>

  • 原生JS实现简单的倒计时功能示例

    本文实例讲述了原生JS实现简单的倒计时功能.分享给大家供大家参考,具体如下: 1.第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div> <scr

  • js代码实现点击按钮出现60秒倒计时

    比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip

  • Javascript倒计时代码

    JS脚本: 复制代码 代码如下: <script language="javascript" type="text/javascript"> var interval = 1000; function ShowCountDown(year, month, day, divname) { var now = new Date(); var endDate = new Date(year, month - 1, day, 14, 07); var leftT

  • JS 倒计时实现代码(时、分,秒)

    JS实现倒计时(时.分,秒) var interval = 1000; function ShowCountDown(year,month,day,divname) { var now = new Date(); var endDate = new Date(year, month-1, day); var leftTime=endDate.getTime()-now.getTime(); var leftsecond = parseInt(leftTime/1000); //var day1=

  • js实现点击获取验证码倒计时效果

    网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:

  • js几秒以后倒计时跳转示例

    复制代码 代码如下: <html> <head> <title>出错啦~~~</title> <link href="css/login1.css" mce_href="css/login1.css" rel="stylesheet" type="text/css" /> <script language="javascript" type=

  • 2种简单的js倒计时方式

    一般倒计时的时间都是后台传来的然后渲染到页面,这里有2个简单的倒计时方式 //带天数的倒计时 function countDown(times){ var timer=null; timer=setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(times > 0){ day = Math.floor(times / (60 * 60 * 24)); hour = Math.floor(times / (

  • JS实现倒计时(天数、时、分、秒)

    本文实例为大家解析了JS实现倒计时的详细过程,供大家参考,具体内容如下 注释: parseInt() 函数可解析一个字符串,并返回一个整数. 语法: parseInt(string, radix) 例: parseInt("10"); //返回 10 parseInt("19",10); //返回 19 (10+9) parseInt("11",2); //返回 3 (2+1) parseInt("17",8); //返回 1

  • 简单易用的倒计时js代码

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>简单易用的倒计时js代码</title> <style> *{ margin:0; padding:0; list-style:none;} body{ font-size:18px; text-align:center;} .time{ height:30px; padding:20

随机推荐