export interface CountdownState {
days: number;
hours: number;
minutes: number;
seconds: number;
}
export class Countdown {
private targetDate: Date;
private intervalId: number | null = null;
countdownState: CountdownState;
private onTickCallback?: () => void;
private onEndCallback?: () => void;
constructor(targetDate: Date) {
this.targetDate = targetDate;
this.countdownState = {
days: 0,
hours: 0,
minutes: 0,
seconds: 0
};
}
/** 仅判断 dd HH:mm:ss 格式时间,如需拓展自行补充 */
private updateCountdown() {
const now = new Date().getTime();
const distance = this.targetDate.getTime() - now;
if (distance <= 0) {
this.stop();
if (this.onEndCallback) {
this.onEndCallback();
}
return;
}
this.countdownState.days = Math.floor(distance / (1000 * 60 * 60 * 24));
this.countdownState.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
this.countdownState.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
this.countdownState.seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (this.onTickCallback) {
this.onTickCallback();
}
}
/** 开始倒计时 */
start(onTick?: () => void, onEnd?: () => void): void {
this.onTickCallback = onTick;
this.onEndCallback = onEnd;
this.intervalId = setInterval(() => {
this.updateCountdown();
}, 1000);
}
/** 停止倒计时 */
stop(): void {
if (this.intervalId !== null) {
clearInterval(this.intervalId);
this.intervalId = null;
}
}
/** 获取倒计时间 */
getCountdownState(): CountdownState {
return this.countdownState;
}
}
使用示例
const targetDate = new Date('结束时间')
const countdown = new Countdown(targetDate)
countdown.start(
() => {
console.log("倒计时执行回调", countdown.getCountdownState())
},
() => {
console.log("倒计时结束回调")
}
)