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设置div大小(Vue实现div滚轮放大缩小)
- vue组件方法里如何修改data(vue项目中使用rem替换px的实现示例)
- vue 实现吸顶效果(vue实现水波涟漪效果的点击反馈指令)
- vue移动端项目用什么打包工具(浅谈使用Vue完成移动端apk项目)
- vue router用法(如何在Vue 3中扩展Vue Router链接详解)
- icon图标怎么引入vue(vue引入iconfont图标库的优雅实战记录)
- vue实现双向绑定原理(vue实现双向数据绑定)
- vue项目步骤(Vue项目中常用的实用技巧汇总)
- springboot+vue项目演示(springboot+VUE实现登录注册)
- vue文件上传进度处理(Vue 大文件上传和断点续传的实现)
- vue 怎么设置滚动条的长度(vue使用better-scroll实现横向滚动的方法实例)
- vuekeep-alive源码(vue中keepAlive组件的作用和使用方法详解)
- vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
- vue项目打包上线的方法(vue项目打包以及优化的实现步骤)
- vue 手机端tab切换页面不刷新(vue Tab切换以及缓存页面处理的几种方式)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- 战 疫 时刻 致敬每一位石化大学的 守护者(战疫时刻)
- 老弄堂里的市井味道(老弄堂里的市井味道)
- 小米音乐可绑定QQ音乐, QQ音乐 真的会消失在小米的设备上吗(小米音乐可绑定QQ音乐)
- 小米Watch S1评测 或许能成为小米冲击高端可穿戴设备的里程碑(小米WatchS1评测或许能成为小米冲击高端可穿戴设备的里程碑)
- 手机QQ与小米路由器在一起 明天揭晓,敬请期待(手机QQ与小米路由器在一起)
- 小米音乐与 QQ 音乐合作,便捷迁移会员(小米音乐与QQ音乐合作)
热门推荐
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- typescript使用技巧(深入理解typescript中的infer关键字的使用)
- 怎么用python做随机矩阵(python实现杨氏矩阵查找)
- django中的limit用法(如何在Django中添加没有微秒的 DateTimeField 属性详解)
- 如何采集nginx的日志(Filebeat 采集 Nginx 日志的方法)
- 怎么样查找linux的ssl证书(护卫神主机大师Linux添加绑定ssl证书图文教程)
- phpcurl调用本地函数(PHP使用CURL实现下载文件功能示例)
- php连接数据库拒绝使用域名(访问php时提示内存位置访问无效的解决办法和思路分析)
- 后端ui框架排名(前后端结合实现amazeUI分页效果)
- css怎样设置文字不换行(css是如何实现在页面文字不换行、自动换行、强制换行的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9