web-dev-qa-db-ja.com

タイマーのカウントダウンAngular 2

私はIonic2アプリのカウントダウンタイマーを作成しようとしています。これは、この方法を今から使用していたということです countdown timer ですが、30：00分のようなカウントダウンを作成する必要があります。それを行うためのより良い方法は何ですか？時間は変化する可能性があり、カウントダウンが完了したときに何かを発射したい場合は、timeが0の場合にのみ比較する必要がありますよね？

javascriptangulartypescripttimercountdown
6
StuartDTO

タイマーを「リッスン」して、カウントダウンが0のときにアクションをトリガーできます。タイマーを表示するには、パイプを使用します。

[〜＃〜] html [〜＃〜]

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

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

TypeScript

  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 [〜＃〜]

19
Vega

タイマーにこれを試してください：

<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');
            }
        })
    }
}
0
Chandru
maxtime: any=30

  StartTimer(){
    this.timer = setTimeout(x => 
      {
          if(this.maxTime <= 0) { }
          this.maxTime -= 1;

          if(this.maxTime>0){
            this.hidevalue = false;
            this.StartTimer();
          }

          else{
              this.hidevalue = true;
          }

      }, 1000);


  }
0
Sylvin Rodrigues