Question

我正在尝试在打字稿中创建一个倒计时js组件，并具有以下内容。

我希望在每个刻度上引发一个事件，并减少剩余的计数。

如果要紧的话，我正在使用vs 2017。

export class DateCountDown {

   constructor(date: any) {

     this.startCountDown(date);

   }   

   startCountDown(date: any) {
       const thousand = 1000;
       const sixty = 60;
       const twentyfour = 24;

       setInterval(() => {
           const now = new Date().getTime();
           const t = date - now;

           const days = Math.floor(t / (thousand * sixty * sixty * twentyfour));
           const hours = Math.floor((t % (thousand * sixty * sixty * twentyfour)) / (thousand * sixty * sixty));
           const minutes = Math.floor((t % (thousand * sixty * sixty)) / (thousand * sixty));
           const seconds = Math.floor((t % (thousand * sixty)) / thousand);

         //Raise the event with above values
       }, 1000);
}

}

如果在事件中提高多个值不理想，我创建了一个类来存储该值，然后提高该值。

export class CountDownValues {
    daysLeft: number;
    hoursLeft: number;
    minutesLeft: number;
    secondsLeft: number;
    constructor(days: number, hours: number, minutes: number, seconds: number) {
        this.daysLeft = days;
        this.hoursLeft = hours;
        this.minutesLeft = minutes;
        this.secondsLeft = seconds;
    }
    public get days(): number {
        return this.daysLeft;
    }
    public get hours(): number {
        return this.hoursLeft;
    }
    public get minutes(): number {
        return this.minutesLeft;
    }
    public get seconds(): number {
        return this.secondsLeft;
    }
}

我只是在尝试创建一个基本的js库/组件，我给它指定一个日期，然后每秒都会引发一个剩余时间的事件，从那里我可以为天，小时，分钟和秒指定不同的值元素。

Answer 1

如果已经理解了您想发出事件的问题，可以通过多种方法来执行此操作...您可以使用第三方事件发送器或自行创建基本事件发送器...您也可以制作类似这样的事件发射器...

class CountDownValues {
  daysLeft: number;
  hoursLeft: number;
  minutesLeft: number;
  secondsLeft: number;
  constructor(days: number, hours: number, minutes: number, seconds: number) {
    this.daysLeft = days;
    this.hoursLeft = hours;
    this.minutesLeft = minutes;
    this.secondsLeft = seconds;
  }
  public get days(): number {
    return this.daysLeft;
  }
  public get hours(): number {
    return this.hoursLeft;
  }
  public get minutes(): number {
    return this.minutesLeft;
  }
  public get seconds(): number {
    return this.secondsLeft;
  }
}

class DateCountDown {
  onCountDown: (values: CountDownValues) => void;

  constructor(date: Date) {
    this.startCountDown(date);
    this.onCountDown = () => {};
  }

  startCountDown(date: Date) {
    const thousand = 1000;
    const sixty = 60;
    const twentyfour = 24;

    setInterval(() => {
      const now = new Date().getTime();
      const t = date.valueOf() - now;

      const days = Math.floor(t / (thousand * sixty * sixty * twentyfour));
      const hours = Math.floor((t % (thousand * sixty * sixty * twentyfour)) / (thousand * sixty * sixty));
      const minutes = Math.floor((t % (thousand * sixty * sixty)) / (thousand * sixty));
      const seconds = Math.floor((t % (thousand * sixty)) / thousand);

      if (this.onCountDown) {
        this.onCountDown(new CountDownValues(days, hours, minutes, seconds))
      }
    }, 1000);
  }
}

let countDown = new DateCountDown(new Date());
countDown.onCountDown = values => console.log(values);

这是一个演示：https://stackblitz.com/edit/typescript-awx9gy?file=index.ts

OP：我为什么更愿意选择第三方？

您一次只能有一个侦听器，这意味着countDown.onCountDown = x => console.log("from first", x); countDown.onCountDown = x => console.log("from second", x);将无法工作...您只会看到“ from second”，因为它会覆盖第一个。实际上，它甚至还不是事件发射器...这有点是伪装的回调... countDown.on("countDown", x => console.log(x))是事件发射器，因为它注册监听器而不是覆盖...
人们通常更熟悉foo.on("bar", x => console.log(x))或foo.addEventListener("bar", x => console.log(x))

但是，如果您要制作自己的小东西，只有您正在研究或将要使用，则使用此工具应该没有问题。但是，要克服第一个原因，您仍然可以实现简单的{{3} }

打字稿课程引发事件

1 个答案: