最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue如何实现倒计时功能 vue实现倒计时功能代码示例
时间:2021-03-18 编辑:袖梨 来源:一聚教程网
vue如何实现倒计时功能?本篇文章小编给大家分享一下vue实现倒计时功能代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
通过父组件传入的结束时间减去当前日期得到剩余时间
1.子组件部分
倒计时{{day}}天{{hour}}时{{minute}}分{{second}}秒
data() { return { day: "", //天 hour: "", //时 minute: "", //分 second: "", //秒 flag: false, }; }, mounted() { let time = setInterval(() => { if (this.flag == true) { clearInterval(time); } this.timeDown(); }, 500); }, props: { endTime: { type: String, }, }, methods: { timeDown() { const endTime = new Date(this.endTime); const nowTime = new Date(); let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000); let d = parseInt(leftTime / (24 * 60 * 60)); let h = this.formate(parseInt((leftTime / (60 * 60)) % 24)); let m = this.formate(parseInt((leftTime / 60) % 60)); let s = this.formate(parseInt(leftTime % 60)); if (leftTime <= 0) { this.flag = true; this.$emit("time-end"); } this.day = d; //天 this.hour = h; //时 this.minute = m; //分 this.second = s; //秒 }, formate(time) { if (time >= 10) { return time; } else { return `0${time}`; } }, }
2.父组件引用
import Times from "@/components/time"; export default { name: "Home", data() { return { timeEnd: "2021-3-30 9:50" //结束时间(苹果手机无法解析"-" 可以将格式改为2021/3/30) }, components: { Times, }, };
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- vue中将el-switch值true、false改为number类型的1和0解析 10-24
- Vue中的路由配置项meta使用解读 10-24
- SpringBoot自定义bean绑定解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24