00:00

Zero-dependency stopwatch using timestamps. Does not implement intervals or "ticking", the utility simply provides the elapsed time when you need it. The rest is up to you.

Install

npm i lil-stopwatch
yarn add lil-stopwatch
              
                import Stopwatch from 'lil-stopwatch';

                const stopwatch = new Stopwatch({ ...options });
or 
              
                <!-- globally available as `LilStopwatch` -->
                <script src="https://unpkg.com/lil-stopwatch@latest/dist/lil-stopwatch.min.js"></script>

API

name description
constructor options 
                    
                      {
                        startImmediately: bool = false,
                        displayHours: bool = false
                        displaySeparator: string = ';',
                        displayMsPrecision: 1 | 2 | 3 = 2,
                      }
play() start the timer
stop() stop/pause the timer
toggle() toggle between stop and play
reset() clear the current state and stop the timer
state { hours, minutes, seconds, milliseconds }
display XX:XX:XX
isRunning specifies if the stopwatch is currently running
isPaused specifies if the stopwatch is stopped/paused
totalMilliseconds total elapsed milliseconds
totalSeconds total elapsed seconds
totalMinutes total elapsed minutes
totalHours total elapsed hours

Examples

Basic Stopwatch

00:00:00

              

                <div id="stopwatch">
                  <h4 id="display">00:00:00</h4>
                  <div id="buttons">
                    <button>start</button>
                    <button>stop</button>
                    <button>reset</button>
                  </div>
                </div>

              
            
              
                import Stopwatch from 'lil-stopwatch';

                const stopwatch = new Stopwatch();
                const display = document.getElementById('display');

                const [start, stop, reset] = document.querySelectorAll('#buttons button');

                start.onclick = () => stopwatch.play();
                stop.onclick = () => stopwatch.stop();
                reset.onclick = () => stopwatch.reset();

                setInterval(() => {
                  display.innerText = stopwatch.display;
                });
Visibility
This element has been visible for
0 seconds
Scroll Time
You've spent
0 seconds
scrolling on this page
Hover Time
This element has been hovered for
0.00 seconds
Time To Target
It took you
0.00 seconds
to get here