在angularJS中倒數計時器功能2

Question

我需要一個用angular2編寫的秒錶計時器函數，用於我的在線考試應用程序。 它應該顯示在HH：MM：SS格式中。 應該從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; 
}