A simple stopwatch webcomponent

<scary-stopwatch>

A simple stopwatch web-component.

Most styling can happen directly on the element.

There's a custom property for the font-size of the milliseconds.

scary-stopwatch {
  font-size: 16px;
  --font-size-ms: 60%;
}

Supported methods of the element are:

.start(resume) - Starts the stopwatch. If resume is true the time will continue from when it was last stopped. Otherwise it will start from 00:00

.stop() - Stops the stopwatch.

.reset() - Resets the time to 00:00.

The current time (in ms) can be read from the .time property.

Install

Link to this version
ImportedReleased 31 August 2018Apache License 2.0
Framework Support
Browser Independent
Install with
npm install @scarygami/scary-stopwatch"@1.1.0-dev.4"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.1.0-dev.4

Dependencies

  • @polymer/lit-element#^0.6.0-dev.6