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


Posted in Javascript onAugust 26, 2019

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

最终效果:

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

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

Javascript 相关文章推荐
使用正则替换变量
May 05 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
微信jssdk用法汇总
Jul 16 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
shiro授权的实现原理
Sep 21 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
vue获取验证码倒计时组件
Aug 26 #Javascript
seajs和requirejs模块化简单案例分析
Aug 26 #Javascript
JavaScript实现身份证验证代码实例
Aug 26 #Javascript
基于vue、react实现倒计时效果
Aug 26 #Javascript
tweenjs缓动算法的使用实例分析
Aug 26 #Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 #Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 #Javascript
You might like
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
体育教师自荐信范文
2013/12/16 职场文书
学习党章思想汇报
2014/01/07 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python
Python与C++中梯度方向直方图的实现
2022/03/17 Python
Redis+AOP+自定义注解实现限流
2022/06/28 Redis