JavaScript距离当前日期倒计时的方法(Vue项目)

项目中，会遇到有过期时间的倒计时，使用方法如下：

export default {data() {return {day: 0, //天hour: 0, //时minute: 0,//分second: 0,//秒timer: null,expireat: '2022-05-01',//过期时间};},methods: {countDown(time) { //倒计时const _this = this;if (!time) {return}let secondes = time;this.timer = setInterval(() => {let now = new Date().getTime();if (now < secondes) {let diff = parseInt((secondes - now) / 1000); //相差多少秒let s = diff % 60; //秒let m = parseInt(diff / 60); //分钟let h = 0;//小时let d = 0; //天if (m > 60) {h = parseInt(m / 60);m = m % 60;}if (h > 24) {d = parseInt(h / 24);h = h % 24;}if (d >= 0) {d = d < 10 ? '0' + d : d}if (h >= 0) {h = h < 10 ? '0' + h : h}if (h >= 0 || m >= 0) {m = m < 10 ? '0' + m : m}s = s < 10 ? '0' + s : s,//时分秒赋值this.day= dthis.hour= hthis.minute= mthis.second= s} else {this.clearTimer()}}, 1000)},clearTimer() {clearInterval(this.timer);this.timer= null},},mounted() {let etimer = new Date(this.expireat).getTime(); //获取过期日期的时间戳this.countDown(etimer)  },destroyed() {this.clearTimer()      }
}

html显示：

<div>{{d}}天 {{h}}时 {{m}} 分{{s}}秒
</div>

JavaScript距离当前日期倒计时的方法(Vue项目)相关推荐

iframe框架内嵌vue项目：Blocked a frame with origin http://xxxx from accessing a cross-origin iframe.解决办法
场景: 网站iframe内嵌vue项目原因: iframe框架跟内嵌网页跨域例如网站域名:http://test.com iframe内嵌域名http://casey.test2.c ...
JavaScript获取当前日期
JavaScript获取当前日期时间的方法,希望对大家有帮助 function formatDate(){const date = new Date();const Year = date.getFu ...
list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
前端报错如何在服务器中显示,详解Vue项目中出现Loading chunk {n} failed问题的解决方法...
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题 ...
Vue项目使用天地图的方法（Vue引入天地图，创建地图实例）
最近项目需要用到天地图,要引入到Vue项目中,鉴于官网没有相关的说明文档,在这里我记录一下我所使用的引入方法,可能不是很好,希望有更好的方法大佬能教一下我. 第一步,在Vue项目文件夹public下的 ...
vue 微信公众号支付接口_总结vue项目中使用微信公众号支付的方法
本篇文章给大家带来的内容是总结vue项目中使用微信公众号支付的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档 ...
Vue项目定义js公用方法
1.使用脚手架搭建vue项目 2.创建一个新的js文件,文件位置根据个人习惯来放接下来编写这个js文件,我是用来去掉富文本编辑器自带的标签和样式 // 将获取的富文本编辑器转过来的html格式转文字 ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...
vue项目刷新当前页面的三种方法
本文介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下. 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时 ...

JavaScript距离当前日期倒计时的方法(Vue项目)

JavaScript距离当前日期倒计时的方法(Vue项目)相关推荐

最新文章

热门文章