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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
vue-router源码之history类的浅析
May 21 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
浅谈es6中的元编程
Dec 01 Javascript
JavaScript实现筛选数组
Mar 02 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 $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
jquery 获取json数据实现代码
2009/04/27 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
django主动抛出403异常的方法详解
2019/01/04 Python
给我一面国旗 python帮你实现
2019/09/30 Python
python软件都是免费的吗
2020/06/18 Python
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
毕业生实习鉴定
2013/12/11 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
好的旅游活动方案
2014/08/19 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
实习生个人总结范文
2015/02/28 职场文书
学习雷锋主题班会
2015/08/14 职场文书
Java版 简易五子棋小游戏
2022/05/04 Java/Android
mysql序号rownum行号实现方式
2022/12/24 MySQL