html - 如何在点击时重置我在 Angular 中创建的计时器?
问题描述
我正在创建一个小型应用程序,一旦我在输入字段内写下所述活动,它就会跟踪我在特定时间跨度内完成的活动,一旦我单击“确定”,它应该出现在列表中。
一旦我单击“确定”按钮,我就被困在如何继续重置计时器,所以基本上我应该在“resetTimer()”函数中添加什么,该函数应该在每次我在列表中添加任务时触发.
HTML:
<div class="modalbox" [class.active]="modalboxActive">
<div class="modal">
<p>What did you do?</p>
<input type="text" [(ngModel)]="activity.name" />
<button (click)="addTask()" [disabled]="activity.name === ''">OK</button>
</div>
</div>
<div class="boxSuper">
<div class="boxLeft">
<div class="containerUp">
<button id="start" (click)="startTimer()">START</button>
<button id="pause" (click)="pauseTimer()">PAUSE</button>
<button id="stop" (click)="stopTimer()">STOP</button>
</div>
<div class="containerDown">
<p>{{ display }}</p>
</div>
</div>
<div class="boxRight">
<div class="containerLeft"></div>
<div class="containerRight">
<ul class="listElement" *ngFor="let item of tasks">
<li>
Activity:
<span>{{ item.name }}</span>
Length:
<span>{{ item.length }}</span>
</li>
</ul>
</div>
</div>
</div>
TS:
import { importExpr } from '@angular/compiler/src/output/output_ast';
import { Component, OnInit } from '@angular/core';
import { timer } from 'rxjs';
import { Activity } from '../activity';
import { Result } from '../result';
@Component({
selector: 'app-timer',
templateUrl: './timer.component.html',
styleUrls: ['./timer.component.css'],
})
export class TimerComponent implements OnInit {
ngOnInit() {}
time: number = 0;
display: string | undefined;
interval: any;
modalboxActive = false;
activity: Activity = {
name: '',
};
tasks: Result[] = [];
addTask() {
var el: Result = {
name: this.activity.name,
end: '',
start: '',
length: this.display,
};
this.tasks.push(el);
this.activity.name = '';
this.modalboxActive = false;
this.resetTimer();
}
resetTimer() {
console.log('reset');
}
startTimer() {
console.log('go');
this.interval = setInterval(() => {
if (this.time === 0) {
this.time++;
} else {
this.time++;
}
this.display = this.transform(this.time);
}, 1000);
}
transform(value: number): string {
var sec_num = value;
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - hours * 3600) / 60);
var seconds = sec_num - hours * 3600 - minutes * 60;
return hours + ':' + minutes + ':' + seconds;
}
pauseTimer() {
clearInterval(this.interval);
}
stopTimer() {
this.modalboxActive = true;
clearInterval(this.interval);
console.log('show');
}
}
结果界面:
export interface Result {
start: string | undefined;
end: string | undefined;
length: string | undefined;
name: string | undefined;
}
解决方案
如果您试图将其重置回 0,您需要做的就是:
resetTimer(){
this.time = 0;
}
推荐阅读
- java - 我这样做对吗?我不确定我的 STOMP 服务器的主题名称和有效负载/消息 ID 是否正确
- python - 如何使用 writelines 压缩文件?
- django - django 创建惰性查询集方法
- javascript - 错误:(节点:17060)警告:要加载 ES 模块,请在 package.json 中设置“类型”:“模块”或使用 .mjs 扩展名
- python-turtle - 用龟蟒投球
- javascript - 如何停用智能向导步骤
- php - 绑定到等于 mysqli 的 PDO 中不同值的正确方法是什么?
- xml - SaxonHE:如何在 XQuery 执行中使用 XSD 类型
- javascript - bower_concat SyntaxError: missing ) 在参数列表之后
- laravel - 这怎么可能发生?npm 错误!缺少脚本:“热”