typescript 计时器倒计时 Angular 2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46316259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Timer countdown Angular 2
提问by StuartDTO
I'm trying to make a countdown timer for my Ionic2 app, the thing is that I was using this method from now countdown timerbut now I have to create the countdown like 30:00 min, what's the better way to do it? Time could change, and if I want to fire something when the countdown it's done I only have to be comparing the timeif it's 0, right?
我正在尝试为我的 Ionic2 应用程序制作一个倒数计时器，问题是我从现在开始使用这种方法，countdown timer但现在我必须像 30:00 分钟一样创建倒计时，有什么更好的方法来做到这一点？时间可能会改变，如果我想在倒计时结束时触发某些东西，我只需要比较它time是否为 0，对吗？
回答by Vega
You can 'listen' to the timer and trigger the action when the countdown is 0. And to display the timer, use a pipe.
您可以“收听”计时器并在倒计时为 0 时触发操作。要显示计时器，请使用管道。
HTML
HTML
{{counter | formatTime}}
TypeScript
打字稿
countDown:Subscription;
counter = 1800;
tick = 1000;
ngOnInit() {
this.countDown = timer(0, this.tick)
.subscribe(() => --this.counter)
}
ngOnDestroy(){
this.countDown=null;
}
Pipe
管道
//for MM:SS format
transform(value: number): string {
const minutes: number = Math.floor(value / 60);
return ('00' + minutes).slice(-2) + ':' + ('00' + Math.floor(value - minutes * 60)).slice(-2);
}
//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);
}
如果您想使用服务：
Service
服务
...
getCounter(tick) {
return timer(0, tick)
}
...
Component
零件
countDown;
counter=1800 ;
tick=1000;
constructor(private myService: MyService) {
}
ngOnInit() {
this.countDown = this.myService.getCounter(this.tick).subscribe(() => this.counter--);
}
ngOnDestroy(){
this.countDown=null;
}
Pipe
管道
...
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);
}
回答by Chandru
Try this for timer:
试试这个定时器：
<h5><span id="time" class="text-primary">00:00</span></h5>
component.ts
组件.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');
}
})
}
}
回答by Sylvin Rodrigues
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);
}
