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中构建ArrayList示例代码
Sep 17 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
JS + HTML 罗盘式时钟的实现
May 21 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
tensorflow识别自己手写数字
2018/03/14 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
使用python远程操作linux过程解析
2019/12/04 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
计算机专业毕业生的自我评价
2013/11/18 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
高中运动会广播稿
2015/08/19 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技