A JavaScript timer with simple and convenient API
Library can be installed via Bower package manager:
bower i chronosjs
An npm
package also available:
$ npm install chronos-js
Or you can clone a git repo:
git clone https://github.com/happyCoda/chronos.git
Just as simple as is.
var chr = new Chronos();
chr.start({
direction: 'forward',
callback: function (chr) {
console.log(chr.composeString());
}
});
Chronos.js supports CommonJS
and AMD
modules. However, library can be used directly in browser, since it exposes chronos object globally in case when no module system detected.
Library entry point. Here all the gears and sprocket starts running.
chr.start({
duration: 10000,
callback: function (chrInst) {
console.log(chrInst.composedToArray(chrInst.composeString())[2] + ' seconds left before explosion!');
}
});
Start method expects to get an Object
as an argument. This object can must have some of these configuration properties – direction
, callback
, duration
and timeString
. The first one, direction
decides whether Chronos will act like a regular clock, or like a countdown timer. If direction is omitted, then Chronos
will work like a timer. The callback
option specifies a function callback which will be invoked every second with Chronos instance passed as an argument. duration
represents time in milliseconds for a timer set up. If you have your setup time represented by a unix timestamp, you can pass this time as timeString
property instead of duration
.
Chronos last stop.
chr.stop();
This method does exactly as it says. If you need to stop Chronos for time counting, just call stop
.
Assembles current time value into a string.
Chronos.composeString();
Converts composed string into a usable array of time units (hours, mins, secs).
Chronos.composedToArray(composedString);
In this example, we start Chronos with forward
option and update changed time every second:
var clockDisplay = document.querySelector('.clock-display');
Chronos.start({
direction: 'forward',
callback: function (chr) {
clockDisplay.textContent = chr.composeString();
}
});
Creating a reverse timer:
var $timeLeft = $('.time-left'),
timeString = new Date(Date.now() + 60 * 60 * 1000);
Chronos.start({
direction: 'backward',
timeString: timeString
callback: function (chr) {
timeLeft.text(chr.composeString());
}
});
- 2017-02-15 v0.5.5 CommonJS support added.
- 2016-02-06 v0.5.4 Switched from singleton to constructor. Now multiple Chronos instances allowed.
- 2016-02-06 v0.4.4 Added support for timer duration in milliseconds.
- 2016-02-06 v0.4.3 AMD support refactor.
- 2016-02-05 v0.4.2 Case when backwards time is past fix.
- 2016-02-05 v0.4.1 Chronos time runner added.
- 2016-02-04 v0.3.0 Forward counting logic added.
- 2016-02-04 v0.2.3 Docs and bower integration.
- 2016-02-04 v0.2.2 adjustUnits method bug fixed.
- 2016-02-04 v0.2.1 Code refactor.
- 2016-02-04 v0.2.0 composedToArray method added & copyrights.
- 2016-02-04 v0.1.0 First official release. Tests and main logic.