Vue implements countdown function

This article example shares the specific code of Vue to implement the countdown function for your reference. The specific content is as follows

Subtract the current date from the end time passed in by the parent component to get the remaining time

1. Subcomponent part

<div class="itemend">
 <p class="itemss">Countdown<span>{{day}}</span>day<span>{{hour}}</span>hour<span>{{minute}}</span>minute<span>{{second}}</span>second</p>
</div>

Code:

data() {
 return {
 day: "", //day hour: "", //hour minute: "", //minute second: "", //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; //day this.hour = h; //hour this.minute = m; //minute this.second = 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 parse "-", so you can change the format to 2021/3/30)
 },
 
 components:
 Times,
 },
};

For more articles about countdown, please see the special topic: "Countdown Function"

For more JavaScript clock effects, click here: JavaScript clock effects special topic

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue writes a simple countdown button function
Simple implementation of the 60-second countdown function of the vue verification code
Vue2.0 countdown plug-in (timestamp refresh jump is not affected)
SMS verification code countdown demo based on vue
Vue implements the countdown function of the verification code button
Multiple countdown implementation code examples in Vue
Vue implements the countdown function of the mall flash sale
Vue implements countdown to get verification code effect
Detailed explanation of designing a countdown component in Vue
Vue verification code 60 seconds countdown function simple example code

<<: Uninstalling MySQL database under Linux

>>: A simple way to restart QT application in embedded Linux (based on QT4.8 qws)