如何在Angular 5中做一个计时器

Question

我正在使用Angular 5.

我想知道如何在按下"播放"按钮时开始计时,以便知道自我点击后已经过了多少时间.

我还想知道是否可以停止计时器,然后能够在之前的同一时间继续.

我终于用Pardeep Jain的答案解决了我的问题.虽然这不是我想要的.我不想倒计时,我想计算持续时间.这是我最后使用的代码:

time: number = 0;
interval;

startTimer() {
  this.play = true;
  this.interval = setInterval(() => {
    this.time++;
  },1000)
}

pauseTimer() {
  this.play = false;
  clearInterval(this.interval);
}

Answer 1

您可以简单地使用setInterval在Angular中创建此类计时器,将此代码用于计时器 -

timeLeft: number = 60;
  interval;

startTimer() {
    this.interval = setInterval(() => {
      if(this.timeLeft > 0) {
        this.timeLeft--;
      } else {
        this.timeLeft = 60;
      }
    },1000)
  }

  pauseTimer() {
    clearInterval(this.interval);
  }

<button (click)='startTimer()'>Start Timer</button>
<button (click)='pauseTimer()'>Pause</button>

<p>{{timeLeft}} Seconds Left....</p>

工作实例

使用Observable计时器的另一种方式如下 -

import { timer } from 'rxjs';

oberserableTimer() {
    const source = timer(1000, 2000);
    const abc = source.subscribe(val => {
      console.log(val, '-');
      this.subscribeTimer = this.timeLeft - val;
    });
  }

<p (click)="oberserableTimer()">Start Observable timer</p> {{subscribeTimer}}

工作实例

有关更多信息,请阅读此处