本文實例為大家分享了vue實現(xiàn)倒計時功能的具體代碼，供大家參考，具體內(nèi)容如下
通過父組件傳入的結束時間減去當前日期得到剩余時間
1.子組件部分
|
1
2
3
|
<div class="itemend"> <p class="itemss">倒計時<span>{{day}}</span>天<span>{{hour}}</span>時<span>{{minute}}</span>分<span>{{second}}</span>秒</p></div> |
代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
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.父組件引用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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, },}; |
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/youngKing0615/article/details/114672374
