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 相关文章推荐
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
Bootstrap表单布局
Jul 19 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
使用JavaScript实现alert的实例代码
Jul 06 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
移动端效果之Swiper详解
2017/10/09 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
Python中用sleep()方法操作时间的教程
2015/05/22 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
深入理解Django中内置的用户认证
2017/10/06 Python
浅谈django的render函数的参数问题
2018/10/16 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
露营世界:Camping World
2017/02/02 全球购物
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
MYSQL基础面试题
2012/05/13 面试题
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
通报表扬范文
2015/01/17 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
护士工作心得体会
2016/01/25 职场文书
mysql创建存储过程及函数详解
2021/12/04 MySQL