vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
类别:编程学习 浏览量:979
时间:2022-03-28 09:20:15 vue 计算一段时间的月份和天数
vue实现指定日期之间的倒计时本文实例为大家分享了vue实现指定日期之间倒计时的具体代码,供大家参考,具体内容如下
效果图如下
此处使用moment.js日期处理类库 使用方法如下
npm install moment 或者 yarn add moment
html
<li class="time-down"> <li class="back">{{dayNum}}</li> <li class="font-14 date">天</li> <li class="back">{{hourNum}}</li> <li class="font-14 date">时</li> <li class="back">{{minuteNum}}</li> <li class="font-14 date">分</li> <li class="back">{{secondNum}}</li> <li class="font-14 date">秒</li> </li>
js
import moment from 'moment'; export default { name: 'TimeRangPage', props: { startTime: String, endTime: String }, data () { return { days: 0, hours: 0, minutes: 0, seconds: 0, timeSetInterval: null, showTimeDown: false, showOver: false }; }, created () { if (moment(new Date()).isBefore(this.startTime)) { this.showTimeDown = true; this.timeDown(); } if (moment(new Date()).isAfter(this.endTime)) this.showOver = true; }, methods: { timeDown () { this.timeSetInterval = setInterval(() => { if (moment(this.startTime).isBefore(moment())) { this.showTimeDown = false; clearInterval(this.timeSetInterval); location.reload(); } let dur = moment.duration(moment(this.startTime) - moment(), 'ms'); this.days = dur.get('days'); this.hours = dur.get('hours'); this.minutes = dur.get('minutes'); this.seconds = dur.get('seconds'); }, 1000); } }, computed: { dayNum () { if (this.days < 10) return '0' + this.days; return this.days; }, hourNum () { if (this.hours < 10) return '0' + this.hours; return this.hours; }, minuteNum () { if (this.minutes < 10) return '0' + this.minutes; return this.minutes; }, secondNum () { if (this.seconds < 10) return '0' + this.seconds; return this.seconds; } } };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
- vue统计代码行数(vue实现计数器简单制作)
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- vue应用转flutter(Vue和Flask通信的实现)
- vue接口请求类封装(Vue接口封装的完整步骤记录)
- vue调用后台接口实现预览(vue实现集成腾讯TIM即时通讯)
- vue中的指令及用法(详解Vue进阶构造属性)
- vue项目的一些手动配置(使用vue项目配置多个代理的注意点)
- vue图片怎么上传服务器(vue-cropper组件实现图片切割上传)
- vue各种模块(一篇文章学会Vue中间件管道)
- vue轮播图代码(vue实现无缝轮播效果跑马灯)
- vue自定义列组件(vue自定义表格列的实现过程记录)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue组件滚动加载教程(Vue组件封装上传图片和视频的示例代码)
- vue封装组件技巧(浅谈vue中所有的封装方式总结)
- 你或许不知道你隐藏的支配欲望(你或许不知道你隐藏的支配欲望)
- 把宽体丰田86卖了,换成7.5代高尔夫GTI玩起姿态与性能并存的改装(把宽体丰田86卖了)
- 大众推出了第五代高尔夫GT(大众推出了第五代高尔夫GT)
- 换代在即,现在是抄底 7.5代 高尔夫的最佳时机吗(换代在即现在是抄底)
- 2020年大众7.5代高尔夫R终结特别版 最后的呐喊(2020年大众7.5代高尔夫R终结特别版)
- 七年前的这部剧有毒,全剧只有女主红到发紫,男主至今无人认识(七年前的这部剧有毒)
热门推荐
- http状态码304
- WdatePicker日历控件的用法
- html5定位地理位置(Html5获取高德地图定位天气的方法)
- js页面跳转的几种代码
- mysql 使用小结(Mysql Online DDL的使用详解)
- python与气象(使用Python和Prometheus跟踪天气的使用方法)
- css3特性动画图(CSS3+DIV实现漂亮的动画彩色标签)
- mysql基础操作报告(gorm操作MySql数据库的方法)
- spring-boot 内置tomcat启动(centos环境下使用tomcat 部署SpringBoot的war包)
- laravel分页(laravel5.5添加echarts实现画图功能的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9