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 相关文章推荐
用javascript实现读取txt文档的脚本
Jul 20 Javascript
简明json介绍
Sep 28 Javascript
javascript 写类方式之七
Jul 05 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 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 获取目录下的图片并随机显示的代码
2009/12/28 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python动态网页批量爬取
2016/02/14 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
python判断输入日期为第几天的实例
2018/11/13 Python
python变量的存储原理详解
2019/07/10 Python
python实现证件照换底功能
2019/08/20 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
python与idea的集成的实现
2020/11/20 Python
python eventlet绿化和patch原理
2020/11/21 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
《狼》教学反思
2014/03/02 职场文书
文体活动实施方案
2014/03/27 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
妈妈别哭观后感
2015/06/08 职场文书
创业计划书之宠物店
2019/09/19 职场文书
Python中Selenium对Cookie的操作方法
2021/07/09 Python
python实现会员信息管理系统(List)
2022/03/18 Python
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技