Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<template>
<div style="background: white;padding: 20px;border-radius: 6px;">
<div style="font-size: 20px;text-align:center;">{timeVal}</div>
<template if:true={showStartBtn}>
<lightning-button label="Start" onclick={start} style="margin-left: 145px;"></lightning-button>
</template>
<template if:false={showStartBtn}>
<lightning-button label="Stop" onclick={stop} style="margin-left: 145px;"></lightning-button>
</template>
<lightning-button label="Reset" onclick={reset} style="margin-left: 10px;"></lightning-button>
</div>
</template>
import { LightningElement, track } from 'lwc';
export default class Stopwatch extends LightningElement {
@track showStartBtn = true;
@track timeVal = '0:0:0:0';
timeIntervalInstance;
totalMilliseconds = 0;
start(event) {
this.showStartBtn = false;
var parentThis = this;
// Run timer code in every 100 milliseconds
this.timeIntervalInstance = setInterval(function() {
// Time calculations for hours, minutes, seconds and milliseconds
var hours = Math.floor((parentThis.totalMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((parentThis.totalMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((parentThis.totalMilliseconds % (1000 * 60)) / 1000);
var milliseconds = Math.floor((parentThis.totalMilliseconds % (1000)));
// Output the result in the timeVal variable
parentThis.timeVal = hours + ":" + minutes + ":" + seconds + ":" + milliseconds;
parentThis.totalMilliseconds += 100;
}, 100);
}
stop(event) {
this.showStartBtn = true;
clearInterval(this.timeIntervalInstance);
}
reset(event) {
this.showStartBtn = true;
this.timeVal = '0:0:0:0';
this.totalMilliseconds = 0;
clearInterval(this.timeIntervalInstance);
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="Stopwatch">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.