定時器倒計時角2

Question

我想爲我的Ionic2應用程序做一個倒計時器，事情是我從現在使用這種方法countdown timer，但現在我必須創建像30:00分鐘倒計時，什麼是更好如何做到這一點？時間可能會改變，如果我想在倒計時完成時發射一些東西，我只需要比較time，如果它是0的話，對吧？

Answer 1

您可以'聽'定時器，並在倒計時爲0時觸發動作。要顯示定時器，請使用管道。

HTML

<h2>{{countDown | async | formatTime}}</h2> 

<button [disabled]="counter == 0">OK</button> 

打字稿

countDown; 
    counter = 30*60; 
    tick = 1000; 
    ngOnInit() { 
    this.countDown = Observable.timer(0, this.tick) 
     .take(this.counter) 
     .map(() => --this.counter) 
    } 

管

//for MM:SS format 

@Pipe({ 
    name: 'formatTime' 
}) 
export class FormatTimePipe implements PipeTransform { 

    transform(value: number): string { 
     const minutes: number = Math.floor(value/60); 
     return ('00'+ minutes).slice(-2) + ':' + ('00'+Math.floor(value-minutes * 60)).slice(-2); 
    } 

} 

DEMO

//for HH:MM:SS format 

transform(value: number): string { 
    const hours: number = Math.floor(value/3600); 
    const minutes: number = Math.floor((value % 3600)/60); 
    return ('00' + hours).slice(-2) + ':' + ('00' + minutes).slice(-2) + ':' + ('00' + Math.floor(value - minutes * 60)).slice(-2); 
} 

DEMO

---

如果您希望使用的服務：

服務

... 
getCounter() { 
    return Observable.timer(0, this.tick) 
     .take(this.counter) 
     .map(() => --this.counter) 
    } 
... 

組件

@Component({ 
    ... 
    providers: [MyService] 
}) 
... 
constructor(private myService: MyService) {} 
ngOnInit(){ 
    this.countDown = this.myService.getCounter().do(() => --this.counter); 
    //or 
    //this.countDown = myService.getCounter(); 
} 
... 

管

... 
    transform(value: number): string { 
    //MM:SS format 
    const minutes: number = Math.floor(value/60); 
    return ('00' + minutes).slice(-2) + ':' + ('00' + Math.floor(value - minutes * 60)).slice(-2); 

    // for HH:MM:SS 
    //const hours: number = Math.floor(value/3600); 
    //const minutes: number = Math.floor((value % 3600)/60); 
    //return ('00' + hours).slice(-2) + ':' + ('00' + minutes).slice(-2) + ':' + ('00' + Math.floor(value - minutes * 60)).slice(-2); 

    } 

DEMO

Answer 2

試試這個定時器：

<h5><span id="time" class="text-primary">00:00</span></h5> 

component.ts

import { Component, OnInit, ElementRef, AfterViewInit } from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 

export class AppComponent implements OnInit { 

    constructor(private elementRef: ElementRef) { } 

    ngOnInit() { 
     var callDuration = this.elementRef.nativeElement.querySelector('#time'); 
     this.startTimer(callDuration); 
    } 

    startTimer(display) { 
     var timer = 1800; 
     var minutes; 
     var seconds; 

     Observable.interval(1000).subscribe(x => { 
      minutes = Math.floor(timer/60); 
      seconds = Math.floor(timer % 60); 

      minutes = minutes < 10 ? "0" + minutes : minutes; 
      seconds = seconds < 10 ? "0" + seconds : seconds; 

      display.textContent = minutes + ":" + seconds; 

      --timer; 
      if (--timer < 0) { 
       console.log('timeup'); 
      } 
     }) 
    } 
}