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

大家好，欢迎来到IT知识分享网。

 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; } });