本文实例为大家分享了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>
最终效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 群星《歌手2024 第13期》[FLAC/分轨][325.93MB]
- 阿木乃《爱情买卖》DTS-ES【NRG镜像】
- 江蕾《爱是这样甜》DTS-WAV
- VA-Hair(OriginalBroadwayCastRecording)(1968)(PBTHAL24-96FLAC)
- 博主分享《美末2RE》PS5 Pro运行画面 玩家仍不买账
- 《双城之战2》超多新歌MV发布:林肯公园再次献声
- 群星《说唱梦工厂 第11期》[320K/MP3][63.25MB]
- 群星《说唱梦工厂 第11期》[FLAC/分轨][343.07MB]
- 群星《闪光的夏天 第5期》[320K/MP3][79.35MB]
- 秀兰玛雅.1999-友情人【大旗】【WAV+CUE】
- 小米.2020-我想在城市里当一个乡下人【滚石】【FLAC分轨】
- 齐豫.2003-THE.UNHEARD.OF.CHYI.3CD【苏活音乐】【WAV+CUE】
- 黄乙玲1986-讲什么山盟海誓[日本东芝版][WAV+CUE]
- 曾庆瑜1991-柔情陷阱[台湾派森东芝版][WAV+CUE]
- 陈建江《享受男声》DTS-ES6.1【WAV】