我试图为我的Ionic2应用程序制作一个倒计时器,问题是我从现在开始使用这种方法countdown timer
但现在我必须创建倒计时30:00分钟,什么& #39;更好的方法吗?时间可能会发生变化,如果我想在倒计时时点火,我只需要比较time
,如果它是0,对吧?
答案 0 :(得分:17)
您可以'收听'计时器并在倒计时为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);
}
<小时/>
如果您想使用服务:
<强>服务强>
...
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);
}
答案 1 :(得分:0)
尝试使用此计时器:
<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');
}
})
}
}
答案 2 :(得分:0)
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);
}