A javscript timer/countdown clock.
Based on an idea by James Edwards: http://sitepoint.com/creating-accurate-timers-in-javascript/
You probably use a dependency manager, such as NPM:
npm install tocktimer
or Yarn
yarn add tocktimer
Tock.js works behind the scenes - it doesn't alter anything on screen - so here I'll show how to make a stop-watch that updates in real-time on screen.
<button id="start">Start</button>
<button id="stop">Stop</button>
<input id="clock" value="10:00">
<script>
//
</script>
First create a new instance of Tock and assign it to a variable called timer.
const timer = new Tock();
This will give you a clock that will count up from 00:00 when the start() method is called. The stop() and reset() methods can also be used.
For more control we can pass in some options. Note that all options are...optional.
const timer = new Tock({
countdown: true,
interval: 10,
callback: someCallbackFunction,
complete: someCompleteFunction
});
You'll need some way of controlling your clock. Let's set add a start button. Note that we get the time from the clock input and pass it to the start function as the start time.
document.getElementById('start').addEventListener('click', () => {
timer.start(document.getElementById('clock').value);
});
Now add a stop button
document.getElementById('stop').addEventListener('click', () => {
timer.stop();
});
If you're not using a countdown clock you can make a reset button, too.
document.getElementById('reset').addEventListener('click', () => {
timer.reset();
});
You could also create a reset button if you are using a countdown clock, but that's beyond the scope of this walkthrough. The tools are there. Do with them what you can. After this next section you're on your own. Good luck. We're all counting on you.
The callback option is a function that will be called once every interval
milliseconds.
Here we'll use the lap()
method to get the current clock time (in milliseconds). We'll then pass that through msToTime()
to format it nicely before displaying it in the input
field.
callback: () => {
var current_time = timer.msToTime(timer.lap());
document.getElementById('clock').value = current_time;
},
If countdown
is true
you can also pass in a function to call once the countdown reaches zero.
complete: () => {
alert("Time's up!");
},
start(time) - Start the timer
time
(optional) can be either a countdown value or a starting value.
If a countdown
is true
then set time
to count down from.
If a countdown
is false
or not time
will control start time to count up from.
Both timer types allow time
as an integer number of milliseconds or as as string - see timeToMS
below.
start()
after reset()
is called.Note: Tock is designed to work with millisecond values. These conversion methods are provided as basic helpers and may be removed entirely in later versions. If you want more complex or custom formatting, you might want to use date-fns.
MM:SS
time string
ms
- number of millisecondsshow_ms
- Optional. If true, return an HH:MM:SS:mmm
format otherwise HH:MM:SS
string
- should be a duration as a string of form:
MM:SS
MM:SS:ms
MM:SS.ms
HH:MM:SS
yyyy-mm-dd HH:MM:SS.ms
. The difference between
this time and present will be returned.0
is returnedI'm using Grunt for task running and Mocha for testing.
Get all dependencies with:
npm install
Run all tasks:
grunt
Run all tasks automatically when you save.
grunt watch
MIT License.