我想为角度制作计时器答案

【问题标题】：I want to make timer up for angular我想为角度制作计时器
【发布时间】：2020-01-27 11:02:44
【问题描述】：

我想为 Angular 做计时计时器。它应该像一个秒表，也可以暂停恢复停止启动它，并从指定的计时器开始的时间开始。

我使用了<countup-timer>，但它不能正常工作，它不是从我指定的日期/时间开始的。

请帮帮我

https://www.npmjs.com/package/ngx-timer 我正在使用这个演示，但它没有按我的需要工作

【问题讨论】：

请提及..您尝试过什么，什么不起作用..
请检查您传递给该包的格式并与包的默认日期进行比较

标签： angular angular-material countdowntimer stopwatch

【解决方案1】：

这里的库工作正常是示例在

应用组件.html

<h3>2. Countdown Timer</h3>
<countdown-timer [countDownTimerConfig]="testConfig"></countdown-timer>
<br>

<button (click)="startTimerGT()">Start with a given time</button>
<button (click)="pauseTimer()">pause</button>
<button (click)="resumeTimer()">Resume</button>
<button (click)="stopTimer()">Stop</button>

在 app.component.ts 中

import { Component } from '@angular/core';
import {CountdownTimerService } from 'ngx-timer'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor(private countdownTimerService: CountdownTimerService){

  }
  name = 'Angular';
   startTimerGT  = ()=>{
    this.stopTimer();
    let cdate = new Date();   // desired date
    cdate.setHours(cdate.getHours() +  1);
    cdate.setSeconds(cdate.getSeconds() +  5);
    this.countdownTimerService.startTimer(cdate);
  }


   stopTimer = () =>{
    this.countdownTimerService.stopTimer();
  }

  resumeTimer = () =>{
    this.countdownTimerService.resumeTimer();
  }
   pauseTimer = () =>{
    this.countdownTimerService.pauseTimer();
  }
}

app.module.ts

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { NgxTimerModule } from 'ngx-timer';

@NgModule({
  imports:      [ BrowserModule, FormsModule ,NgxTimerModule],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

示例工作代码也在这里 https://stackblitz.com/edit/angular-vzygxv

【讨论】：

【解决方案2】：

有一个名为“srr-elapsedtimer”的库，你可以用它来解决这个问题

首先使用此代码安装库

npm i srr-elapsedtimer

之后，像下面这样配置你的 app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// Import library module
import { ElapsedtimerModule } from "srr-elapsedtimer";
 
@NgModule({
  imports: [
    // ...
    ElapsedtimerModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
Add ElapsedtimerService service wherever you want to use the srr-elapsedtimer.

import { ElapsedtimerService } from "srr-elapsedtimer";
 
class AppComponent implements OnInit {
  constructor(private timer: ElapsedtimerService) {}
 
  ngOnInit() {
    
     this.timer.startTimer(); //This is simple example on how we can use a function
 
  }
}

把这段代码放到你的html文件中

<srr-elapsedtimer></srr-elapsedtimer>

最后，准备你的component.ts，如下所示

import { ElapsedtimerService } from "srr-elapsedtimer";
 
class AppComponent implements OnInit {
  constructor(private timer: ElapsedtimerService) {}
 
  ngOnInit() {
    
     this.timer.startTimer(); //This is simple example on how we can use a function
 
  }
}

要暂停、恢复和停止，您可以相应地使用以下方法

this.timer.pauseTimer() //Pause the timer
this.timer.resumeTimer() //Resume the timer
this.timer.resetTimer() //Reset the timer

要延迟启动定时器，可以使用下面的方法

this.timer.delayStart(seconds:number)

有关更多信息，请参阅此！ https://www.npmjs.com/package/srr-elapsedtimer

【讨论】：