js 倒计时器（保姆级教程）

 1. 倒计时器封装的方法

        utils文件夹中创建index.js 文件

// 倒计时的方法
countdown(targetDate, callback) {
	const timer = setInterval(() => {
		// 获取当前时间戳
		const now = new Date().getTime();
		// 解析截止日期时间戳
		targetDate = new Date(targetDate).getTime()
		const distance = targetDate - now;
		// 结束倒计时
		if (distance <= 0) {
			clearInterval(timer);
			if (callback) {
				callback({
					days: 0,
					hours: 0,
					minutes: 0,
					seconds: 0,
					ended: true
				});
			}
		} else {
			const days = Math.floor(distance / (24 * 60 * 60 * 1000));
			const hours = Math.floor(distance / (1000 * 60 * 60));
			const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
			const seconds = Math.floor((distance % (1000 * 60)) / 1000);
			if (callback) {
				callback({
					days,
					hours,
					minutes,
					seconds,
					ended: false
				});
			}
		}
	}, 1000);
}


//导出
export default {
	countdown
}

2. main.js 挂载全局

// 引入该插件文件
import util from "@/utils/index.js";

// 将封装的倒计时方法挂载到整个项目，名字就叫countdown
Vue.prototype.countdown = util.countdown; 

 3. 组件中使用

        返回天、时、分、秒

// 到期时间
let endTime = '2023-10-10'
this.countdown(endTime, (countdownResult) => { // 回调
    if (countdownResult.ended) {
        // console.log("倒计时结束");
    } else {
        // 赋值时分秒
        this.days = countdownResult.days;
        this.hours = countdownResult.hours;
        this.minutes = countdownResult.minutes;
        this.seconds = countdownResult.seconds;
    }
});