The vanilla ES6 JavaScript simple timer module for any needs. Takes an existing HTML element and creates a timer from it.
You can just take ready-to-use index.js
file from this repository.
But the better way would be to clone this repository as a git submodule into your project:
cd your/project/directory
git submodule add https://github.com/ZitRos/Timer.git source/client/js/Timer
NOTE: your/project/directory
is the directory of your project, source/js/Toast
is the sub-directory in your project where this repository will be cloned.
Lets say we have this HTML:
<div>
Time since page load: <span id="timer"></span>
</div>
To initialize timer, and, for example, set the count up timer (default one), write the next JavaScript:
import Timer from `./Timer`; // directory where timer is stored
let timerElement = document.querySelector(`#timer`),
timer = new Timer(timerElement);
// For example, this makes timer start from beginning each click on it
timerElement.addEventListener(`click`, () => {
timer.reset({ autoStart: false }).start(); // chain sample!
});
Constructor. Initializes the timer over the element.
element
- HTML element.options
- Optional object with additional configuration.mask
{string}
="hh:mm:ss"
- Output format.h
,m
,s
and doubles are supported.updateInterval
{number}
=1000
- Timer update interval in milliseconds.type
{string}
="countup"
- Timer type.initialTime
{number}
=0
- Initial time in milliseconds.autoStart
{boolean}
=true
- Start the timer when constructor instantiated.
Resets the timer to it's initial state. Optionally takes options
which
are the same as in constructor.
Start the timer.
Stops the timer.
Refreshes timer UI. Not for potential use, as timer calls this function each time it updates.