admin管理员组文章数量:1289529
I am using angular. I want to implement stopwatch. I have a list which consists of one or more objects. I have a start timer and end the timer button for each item. when I click on the start button this should start the timer for the specific item & when I click on the end timer button this should pause the timer so that I can restart the time. but only one timer should run at a time. if Item A timer is started & if click on the start timer button of Item B it should pause the previous timer & start the new timer for Item B.
allUserTaskArr = [
{
'name': 'abc',
'id':1,
'start': true,
'end': false
},
{
'name': 'xyz',
'id':1,
'start': true,
'end': false
}
];
startTask (item) {
if(item.start) {
item.end = true;
item.start= false;
}
}
EndTask (item) {
if(item.end) {
item.end = false;
item.start= true;
}
}<div class="row no-gutters">
<div class="card width hr" *ngFor="let item of allUserTaskArr">
<div class="card-header">
{{item.due | date}}
</div>
<div class="card-body pad-125">
<div class="row no-gutters">
<div class="col-md-12">
{{item.name}}
<div class="float-right">
<button class="btn btn-info mar-l-r-0-5" *ngIf="item.start" (click)="startTask(item)">Start Timer</button>
<button class="btn btn-danger mar-l-r-0-5" *ngIf="item.end" (click)="EndTask(item)">End Timer</button>
</div>
</div>
</div>
</div>
</div>
</div>I am using angular. I want to implement stopwatch. I have a list which consists of one or more objects. I have a start timer and end the timer button for each item. when I click on the start button this should start the timer for the specific item & when I click on the end timer button this should pause the timer so that I can restart the time. but only one timer should run at a time. if Item A timer is started & if click on the start timer button of Item B it should pause the previous timer & start the new timer for Item B.
allUserTaskArr = [
{
'name': 'abc',
'id':1,
'start': true,
'end': false
},
{
'name': 'xyz',
'id':1,
'start': true,
'end': false
}
];
startTask (item) {
if(item.start) {
item.end = true;
item.start= false;
}
}
EndTask (item) {
if(item.end) {
item.end = false;
item.start= true;
}
}<div class="row no-gutters">
<div class="card width hr" *ngFor="let item of allUserTaskArr">
<div class="card-header">
{{item.due | date}}
</div>
<div class="card-body pad-125">
<div class="row no-gutters">
<div class="col-md-12">
{{item.name}}
<div class="float-right">
<button class="btn btn-info mar-l-r-0-5" *ngIf="item.start" (click)="startTask(item)">Start Timer</button>
<button class="btn btn-danger mar-l-r-0-5" *ngIf="item.end" (click)="EndTask(item)">End Timer</button>
</div>
</div>
</div>
</div>
</div>
</div>4 Answers
Reset to default 4Create a timer which grows per sec, then convert the time to display format
timer(0, 1000).subscribe(ec => {
this.time++;
this.timerDisplay = this.getDisplayTimer(this.time);
});
getDisplayTimer(time: number) {
const hours = '0' + Math.floor(time / 3600);
const minutes = '0' + Math.floor(time % 3600 / 60);
const seconds = '0' + Math.floor(time % 3600 % 60);
return {
hours: { digit1: hours.slice(-2, -1), digit2: hours.slice(-1) },
minutes: { digit1: minutes.slice(-2, -1), digit2: minutes.slice(-1) },
seconds: { digit1: seconds.slice(-2, -1), digit2: seconds.slice(-1) },
};
}`
You will need to create a timer, which is an Observable you can subscribe to. In the callback do the action. For example:
in Component:
import { timer } from "rxjs";
ngOnInit() {
timer(0, 1000).subscribe(ellapsedCycles => {
if(this.isRunning) {
this.time--;
}
});
}
toggleTimer() {
this.isRunning = !this.isRunning;
}
and in Template:
<button (click)="toggleTimer()">Toggle timer</button>
<div>{{ time }}</div>
You are starting and ending the same timer because you pass the current item of the foreach loop. So you change the properties of the same item/timer.
To fix that you need to find the item/timer which is currently running so for the startTask method do the following:
startTask (item) {
// Find current running timer
var runningTimer = this.allUserTaskArr.find(ti => ti.start === true);
// Stop this timer
runningTimer.start = false;
runningTimer.end = false;
// Start the timer you pressed
item.start = true;
}
Stopwatch dynamic set value
export class TimerComponent implements OnDestroy {
clock: any;
minutes: any = '00';
seconds: any = '00';
milliseconds: any = '00';
hours:any = '00';
@Input() start: boolean;
@Input() showTimerControls: boolean;
constructor() {
}
ngOnChanges(changes: SimpleChanges) {
console.log(changes['start']);
if (changes['start'].currentValue) {
this.startTimer();
}
else{
this.clearTimer();
}
}
laps: any = [];
counter: number;
timerRef;
running: boolean = false;
startText = 'Start';
startTimer() {
// const source = timer(0, Date.now());
// const subscribe = source.subscribe(val => console.log(val));
this.running = !this.running;
if (this.running) {
this.startText = 'Stop';
const startTime = Date.now() - (this.counter || 0);
// const startTime = Date.now() - (this.counter || 5989395);
this.timerRef = setInterval(() => {
this.counter = Math.abs(new Date('July 12, 2020 20:00:00').getTime() - new Date().getTime());
// this.counter = Date.now() - startTime;
// console.log(Date.now());
// console.log(startTime);
// console.log(this.counter);
// this.milliseconds = Math.floor(Math.floor(this.counter % 1000) / 10).toFixed(0);
// this.minutes = Math.floor(this.counter / 60000);
// this.seconds = Math.floor(Math.floor(this.counter % 60000) / 1000).toFixed(0);
// this.hours = Math.floor(this.counter / 3600000);
this.hours = Math.floor((this.counter % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
this.minutes = Math.floor((this.counter % (1000 * 60 * 60)) / (1000 * 60));
this.seconds = Math.floor((this.counter % (1000 * 60)) / 1000);
//console.log(this.counter);
if (this.counter < 0) {
this.clearTimer();
console.log('expired')
}
if (Number(this.hours) < 10) {
this.hours = '0' + this.hours;
} else {
this.hours = '' + this.hours;
}
if (Number(this.minutes) < 10) {
this.minutes = '0' + this.minutes;
} else {
this.minutes = '' + this.minutes;
}
if (Number(this.seconds) < 10) {
this.seconds = '0' + this.seconds;
} else {
this.seconds = '' + this.seconds;
}
});
}
<div class="container">
<section class="timer-counter-label">
<div *ngIf="counter" [ngClass]="{blink: !running}">
<span>{{hours}}:</span><span>{{minutes}}:</span><span>{{seconds}}:</span> <span>{{milliseconds}}</span> </div>
<div *ngIf="!counter">
<!-- <span class="blink timer-start-text">Press Start</span> -->
<!-- <br> -->
<span>{{hours}}:</span><span>{{minutes}}:</span><span>{{seconds}}:</span> <span>{{milliseconds}}</span>
</div>
</section>
<div class="timer-button-container" *ngIf="showTimerControls">
<button class="timer-button" (click)="startTimer()">
{{ startText }}
</button>
<button [disabled]='!counter' [ngClass]="{'disabled': !counter}" class="timer-button" (click)="lapTimeSplit()">Lap</button>
<button class="timer-button" (click)="clearTimer()">Clear</button>
<br>
<div *ngFor="let lap of laps;let i = index">
<div> ⚑ <b>Lap {{i+1}} ::</b> {{lap}}</div>
<br>
</div>
</div>
</div>
本文标签： javascriptcreate a stopwatch in angular 6Stack Overflow
版权声明：本文标题：javascript - create a stopwatch in angular 6 - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741401869a2376714.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论