Question

我需要一个用angular2编写的秒表计时器功能，用于我的在线考试应用程序。它应显示在HH：MM：SS formate中。它应该从01:00:00开始，应该在00:00:00结束

Answer 1

你可以这样做：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="buttonClicked()">{{ started ? 'reset' : 'start' }}</button>
      <br />
      <span>{{ time.getHours() }}</span>:
      <span>{{ time.getMinutes() }}</span>:
      <span>{{ time.getSeconds() }}</span>
    </div>
  `,
})
export class App {
  name:string;
  started = false;
  time = new Date(2000, 1, 1, 1, 0, 0);

  constructor() {
    this.name = 'Angular2'

    this._timerTick();
  }

  private _timerTick() {
    if (this.started) {
      this.time.setSeconds(this.time.getSeconds(), -1);
    }

    setTimeout(() => this._timerTick(), 1000);
  }

  buttonClicked() {
    if (this.started) this.reset();
    else this.start();
  }

  start() {
    this.started = true;
  }

  reset() {
    this.started = false;
    this.time = new Date(2000, 1, 1, 1, 0, 0);
  }
}

现场演示：https://plnkr.co/edit/BkMkAuSoqVgQMhqEKAAg?p=preview

但是，像往常一样，有多种方法可以实现目标！：）

Answer 2

倒计时器功能获取的Html元素按钮触发...

<div class="form-group col-sm-3" [ngClass]="{'red':activate, 'white':!activate, 'blink_me':blink}"><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;Time Left:&nbsp;<span>{{currentHour}}:{{currentMinute}}:{{currentSeconds}}</span></div>
<button class="btn btn-primary btn-sm" (click)="_timerTick()">Start Timer</button>

完整的倒数计时器功能在下面的代码中显示（请在计时器组件类中包含这段代码）

constructor(
    private examService: ExamService,
    private resultService: ResultService,
    private activatedRoute: ActivatedRoute,
    private route: Router) {

        this.start(); //here our countdown timer function gets called by setting the boolean variable **this.started** as true.
}

start() {
    this.started = true;
}

private _timerTick() {
    if (this.started) {

        if (localStorage.getItem('sec')) { // here it checks, if browser local-storage has key **sec** recorded. Basically, when browser gets refreshed by user on that case it used to store key **sec** in local-storage and continue countdown ticking without starting from the beginning.
            this.time = new Date(localStorage.getItem('sec'));
            this.time.setSeconds(this.time.getSeconds(), -1);
        }
        else {
            this.time = new Date(2017, 2, 24, 0, 0, this.timeInSeconds);
            this.time.setSeconds(this.time.getSeconds(), -1);
        }
        if (this.time.getHours() === 0 && this.time.getMinutes() === 0 && this.time.getSeconds() === 0) {
            localStorage.removeItem('sec');
            this.started = false;
            this.saveData('Time Over!');
        }
        this.currentHour = this.time.getHours();
        this.currentHour = ("0" + this.currentHour).slice(-2); //Here it check for two digits. If it is single then it adds 0 as prefix to it.
        this.currentMinute = this.time.getMinutes();
        this.currentMinute = ("0" + this.currentMinute).slice(-2);//Here it check for two digits. If it is single then it adds 0 as prefix to it.
        this.currentSeconds = this.time.getSeconds();
        this.currentSeconds = ("0" + this.currentSeconds).slice(-2);//Here it check for two digits. If it is single then it adds 0 as prefix to it.
        if (this.currentHour == 0 && this.currentMinute < 5) {// This line states, if only 5minutes left out then timer get started blinking. Blink code given in below **css** code section
            this.activate = true;
            this.blink = true;
        }
        if (this.currentHour == 0 && this.currentMinute == 0 && this.currentSeconds == 0) {// If time is up then we would remove complete browser cache using below lines of code and also deactivate the timer blinking.
            localStorage.removeItem('sec');
            localStorage.setItem('examTaken', this.name);
            this.activate = false;
            this.blink = false;
        }
        else {
            localStorage.setItem('sec', this.time);// If still some time's left out then it'll continuously keep updated with browser localStorage
        }
    }
    setTimeout(() => this._timerTick(), 1000);// For every 1sec timer gets updated here
}

下面给出了Timer Blink的CSS代码。

.blink_me {
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
.white {
    color: white;
}
.red {
    color: #ff0000;
}

倒计时器功能在angularJS 2中倒计时

2 个答案: