счетчик таймера функция в угловомJS 2

Question

Мне нужна функция таймера секундомера, написанная в угловом2 для моего онлайн-экзамена. Он должен отображаться в формате ЧЧ: ММ: СС. Она должна начинаться с 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 
} 

Код CSS для таймера Blink, указанный ниже.

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