创建具有两位小数的运行时

Question

我需要为用户创建经过的时间并在屏幕上显示如下：00:00:00.

目前我正在按照下面的方式进行操作，但它采用 0:0:0 格式，我需要采用 格式]01:03:59.

用户点击开始并开始计算运行时间。

我该怎么做？

打字稿：

this.duration = {
  hours: 0,
  minutes: 0,
  seconds: 0
};



start(): void {
  const counter = setInterval(() => {

  this.duration.seconds += 1;

  if (this.duration.minutes === 60) {
    this.duration.hour += 1;
  }

  if (this.duration.seconds === 60) {
    this.duration.minutes += 1;
  }

  if (this.duration.seconds === 60) {
    this.duration.seconds = 0;
  }

}, 1000)

}

在html:

{{ duration.hours }}:{{ duration.minutes }}:{{ duration.seconds }}

Answer 1

您好，您可以使用 Angular pipe

来实现

<div>{{time| date:'HH:mm:ss'}}</div> 12:01:59

Answer 2

您可以编写自己的管道，如下所示：

import _ from 'lodash';
import { Pipe, PipeTransform } from '@angular/core';

// ...

@Pipe({name: 'doubleDigits'})
export class DoubleDigitsPipe implements PipeTransform {
  transform(value: any) {
    return _.isNumber(value) && value <= 9 ? "0"+value : value;
  }
}

// HTML

{{ duration.hours | doubleDigits }}:{{ duration.minutes | doubleDigits }}:{{ duration.seconds | doubleDigits }}

这会将您的号码转换为模板中的字符串，但我认为这不会造成问题。

Answer 3

您可以为每个部分使用现有的 angular 数字管道

{{ duration.hours | number:'2.0-0'}}:{{ duration.minutes | number:'2.0-0'}}:{{ duration.seconds | number:'2.0-0'}}

这样，如果您的小时数超过 99，它也会正确显示

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1.
minFractionDigits: The minimum number of digits after the decimal point. Default is 0.
maxFractionDigits: The maximum number of digits after the decimal point. Default is 3.

工作Demo

创建具有两位小数的运行时

create runtime with two decimal places

intervals

typescript

angular