angular - 角度 8 秒表
问题描述
我需要一个秒表,以 hh:mm:ss 格式显示时间
解决方案
这是我研究了一段时间但没有找到我想要的确切类型后制作的秒表。希望这可以帮助有同样问题的人。时间以 hh:mm:ss 格式显示在屏幕上,如果需要更改在 getDisplayTimer() 方法中
import { timer } from 'rxjs';
//timer
public displayTimer;
public isRunning: boolean = false;
public startText = 'Start';
public time;
ngOnInit(): void {
this.time = 0;
}
toggleTimer() {
this.isRunning = !this.isRunning;
this.stopwatch();
}
stopwatch() {
timer(0, 1000).subscribe(ellapsedCycles => {
if (this.isRunning) {
this.time++;
this.getDisplayTimer(this.time);
this.startText = 'Pause';
} else {
this.startText = 'Start';
}
});
}
getDisplayTimer(time: number) {
var hours = '' + Math.floor(time / 3600);
var minutes = '' + Math.floor(time % 3600 / 60);
var seconds = '' + Math.floor(time % 3600 % 60);
if (Number(hours) < 10) {
hours = '0' + hours;
} else {
hours = '' + hours;
}
if (Number(minutes) < 10) {
minutes = '0' + minutes;
} else {
minutes = '' + minutes;
}
if (Number(seconds) < 10) {
seconds = '0' + seconds;
} else {
seconds = '' + seconds;
}
this.displayTimer = hours + ':' + minutes + ':' + seconds;
}
<div class="row">
<div class="col-lg-4 m-b-30">
<section class="timer-counter-label">
<div *ngIf="displayTimer; else elseBlock"> {{displayTimer}} </div>
<ng-template #elseBlock> 00:00:00 </ng-template>
</section>
<section class="timer-button-container">
<button class="btn btn-outline-light" (click)="toggleTimer()">
{{ startText }}
</button>
</section>
</div>
</div>
推荐阅读
- java - 是否可以从 Firebase 上的 Google 身份验证中获取名字和姓氏?
- css - CSS:剪辑路径:多边形 - 圆形边框
- flutter - 创建 TextEditingController 对象时出错
- amazon-web-services - 在 AWS EKS 中,如何定义入口以将一个 ALB 用于多个子域 URL,每个 URL 都有自己的证书?
- c - 从用户输入的结构体链表打印
- mysql - 我如何获得 django“列的数据太长”
' at row" 错误以打印实际值? - r - 如何根据其他变量和时间间隔创建新变量(在 R 中)
- html - 我如何提交
- sql - 在 Spark SQL 中应用 to_date() 和 add_months 函数时出错
- php - Laravel 8:构造表