HarmonyOS中封装一个倒计时方法

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("倒计时结束回调")
   }
)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值