Skip to content

zzinpan/Stopwatch.js

Repository files navigation

Stopwatch.js

build test documentation publish pages-build-deployment

Stopwatch.js is a JavaScript-based stopwatch library.
Lightweight, easy to use,
Available in browsers, ESM, CJS, AMD, and UMD.


Installation

Note: Please enter a value of {version} in the import path.


Browser

<script type="javascript" src="https://cdn.jsdelivr.net/npm/@zzinpan/stopwatch.js@{version}/dist/iife/Stopwatch.min.js"></script>

Browser - ECMAScript Module

<script type="module">
import Stopwatch from "https://cdn.jsdelivr.net/npm/@zzinpan/stopwatch.js@{version}/dist/esm/Stopwatch.min.js";

// ...
</script>

Node.js

# Installation
npm install @zzinpan/stopwatch.js
const Stopwatch = require( "@zzinpan/stopwatch.js" );

// ...

getting started

import Stopwatch from "Stopwatch.js";

// create api
const stopwatch = new Stopwatch();

// add events
stopwatch.on( "update", ( time ) => console.log( time ) );
stopwatch.on( "alarm", ( time ) => alert( time ) );

// set alarm
stopwatch.setAlarm( 5000, Stopwatch.AlarmType.ABSOLUTE );

// start
stopwatch.start();

Sample - browser


https://zzinpan.github.io/Stopwatch.js/sample/img/thumbnail.png


The same features are implemented in IIFE, ESM, AMD, and UMD respectively.

  • start: click the right button
  • stop: click the right button ( toggle )
  • pause: click the left button ( during the start )
  • setAlarm: drag the small hand
  • stopAlarm: click the stopwatch

https://zzinpan.github.io/Stopwatch.js/sample/index.html
https://zzinpan.github.io/Stopwatch.js/sample/index-esm.html
https://zzinpan.github.io/Stopwatch.js/sample/index-amd.html
https://zzinpan.github.io/Stopwatch.js/sample/index-umd.html


document

If you want to use a simple stopwatch:
https://zzinpan.github.io/Stopwatch.js/docs/classes/Stopwatch.default.html

If you want to create a custom AlarmType:
https://zzinpan.github.io/Stopwatch.js/docs/classes/Stopwatch_AlarmType.default.html

If you are curious about the full code:
https://zzinpan.github.io/Stopwatch.js/docs/

If you want to see a test coverage:
https://zzinpan.github.io/Stopwatch.js/coverage/lcov-report/index.html



Thanks for using it!