计时器 - Angular 8 的计时器

Question

我正在尝试显示一个计时器，如下面的屏幕截图所示。不断计数以显示自输入此条目以来的时间。

我在 Angular 中找不到太多的选择。我在 Angular JS 中找到了这个解决方案。 https://siddii.github.io/angular-timer/ 我需要这样的计时器。但是我无法将它移植到 Angular 或者我不能。所以尝试了其他可用的替代方案，发现这些仍然无法正常工作。

https://www.npmjs.com/package/ng2-simple-timer

https://www.npmjs.com/package/ngx-timer

我最接近的是这个 ngx-timer 的 Countup-timer。 https://www.npmjs.com/package/ngx-timer 计时器工作正常，并且能够根据我的要求从给定日期开始。开始计时器（开始日期）。但它有一个尚未解决的已知问题，即它适用于计时器元素的最后一个已知索引，因此整个 timers.You 列表中只有一个计时器运行可以注意到上面给出的屏幕截图本身。

这是一个已知错误。 https://github.com/Y4SHVINE/ngx-timer-lib/issues

所以有人可以帮我提供解决方案或对这些解决方案之一进行一些调整以使其工作。

谢谢。

Answer 1

你可以像这样使用 RxJS 来做到这一点：

  const startDate = new Date('2020-03-08 14:12:23');

  timer(1000, 1000)
    .pipe(
      map((x: number) => {
        const newDate = new Date(startDate.getTime());
        newDate.setSeconds(newDate.getSeconds() + x);
        return newDate;
      })
    )
    .subscribe(t => this.myDate = t);

然后在你的组件中你做：

<div>{{ mydate | date: "hh 'h' mm 'm' ss 's'" }}</div>

Answer 2

我会通过编写一个函数来实现 return 当前时间和对象创建时间之间的差异。

我最初的想法是 return 将差异作为 Date 对象，然后格式化结果。我很快运行在格式化不同的时间跨度时遇到问题，因为日期与时间跨度不同。

因此，与其尝试格式化伪装成时间跨度的 Date，不如创建自己的界面。

export interface TimeSpan {
  hours: number;
  minutes: number;
  seconds: number;
}

通过这样做，我们可以控制时间跨度 >= 1 天的处理方式，并避免时区问题。

我会使用 OnPush 变化检测来控制何时变化检测是运行:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  constructor(private changeDetector: ChangeDetectorRef) {}
}

然后我会在 ngOnInit() 中启动一个 RxJS interval，确保在我们完成后取消订阅：

private destroyed$ = new Subject();

ngOnInit() {
  interval(1000).subscribe(() => {
    this.changeDetector.detectChanges();
  });
}

ngOnDestroy() {
  this.destroyed$.next();
  this.destroyed$.complete();
}

然后 HTML 将从我的组件上的一个函数获取运行时间：

getElapsedTime(entry: Entry): TimeSpan {        
  let totalSeconds = Math.floor((new Date().getTime() - entry.created.getTime()) / 1000);

  let hours = 0;
  let minutes = 0;
  let seconds = 0;

  if (totalSeconds >= 3600) {
    hours = Math.floor(totalSeconds / 3600);      
    totalSeconds -= 3600 * hours;      
  }

  if (totalSeconds >= 60) {
    minutes = Math.floor(totalSeconds / 60);
    totalSeconds -= 60 * minutes;
  }

  seconds = totalSeconds;

  return {
    hours: hours,
    minutes: minutes,
    seconds: seconds
  };
}

此函数首先获取自创建日期以来经过的总秒数，然后计算出小时、分钟和秒的组成部分。

其中 entry 是包含一些 Date 实例的对象，指示其创建时间。对于我的演示，我使用的是这个界面：

export interface Entry {
  created: Date;
  id: string;
}

然后可以为 *ngFor 中的每个实例检索经过的时间跨度，如下所示：

<span *ngIf="getElapsedTime(entry) as elapsed">
  {{elapsed.hours}} h {{elapsed.minutes}} m {{elapsed.seconds}} s
</span>

演示版：https://stackblitz.com/edit/angular-p1b9af

计时器 - Angular 8 的计时器

Timer - Count up timer for Angular 8

javascript

user-interface

timer

angular-directive

angular