This article has shared the specific code for vue to implement the countdown function for your reference. The specific content is as follows
The end time passed by the parent component minus the current date to get the remaining time
1. Subcomponent part
<div class="itemend">
<p class="itemss">Countdown<span>{{day}}</span>sky<span>{{hour}}</span>hour<span>{{minute}}</span>point<span>{{second}}</span>Second</p>
</div>
Code:
data() {
return {
day: "", //sky hour: "", //hour minute: "", //point second: "", //Second flag: false,
};
},
mounted() {
let time = setInterval(() => {
if ( == true) {
clearInterval(time);
}
();
}, 500);
},
props: {
endTime: {
type: String,
},
},
methods: {
timeDown() {
const endTime = new Date();
const nowTime = new Date();
let leftTime = parseInt((() - ()) / 1000);
let d = parseInt(leftTime / (24 * 60 * 60));
let h = (parseInt((leftTime / (60 * 60)) % 24));
let m = (parseInt((leftTime / 60) % 60));
let s = (parseInt(leftTime % 60));
if (leftTime <= 0) {
= true;
this.$emit("time-end");
}
= d; //sky = h; //hour = m; //point = s; //Second },
formate(time) {
if (time >= 10) {
return time;
} else {
return `0${time}`;
}
},
}
2. Parent component reference
<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" //End time (Apple phones cannot resolve "-" and can change the format to 2021/3/30) },
components: {
Times,
},
};
For more articles about countdown, please check out the topic:Countdown function
For more JavaScript clock effects click to view:JavaScript clock special effects topic
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.