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 相关文章推荐
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
vue使用element-ui按需引入
May 20 Vue.js
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 之入门篇
2006/12/04 PHP
PHP如何编写易读的代码
2007/07/10 PHP
解析PHP的session过期设置
2013/06/29 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python3 配置logging日志类的操作
2020/04/08 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
大学毕业感言100字
2014/02/03 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
售后客服工作职责
2014/06/16 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
教师节随笔
2015/08/15 职场文书
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers