这期内容当中小编将会给大家带来有关使用Vue怎么实现一个倒计时功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。通过父组件传入的结束时间减去当前日期得到剩余时间子组件部分<div clas
这期内容当中小编将会给大家带来有关使用Vue怎么实现一个倒计时功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
通过父组件传入的结束时间减去当前日期得到剩余时间
子组件部分
<div class="itemend"> <p class="itemss">倒计时<span>{{day}}</span>天<span>{{hour}}</span>时<span>{{minute}}</span>分<span>{{second}}</span>秒</p></div>
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}`; } },}
父组件引用
<template> <div> <Times :endTime='timeEnd'></Times> </div> </template>import Times from "@/components/time";export default { name: "Home", data() { return { timeEnd: "2021-3-30 9:50" //结束时间(苹果手机无法解析"-" 可以将格式改为2021/3/30) }, components: { Times, },};
上述就是小编为大家分享的使用vue怎么实现一个倒计时功能了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网精选频道。
--结束END--
本文标题: 使用vue怎么实现一个倒计时功能
本文链接: https://www.lsjlt.com/news/268529.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0