Easy To Use Timer/Stopwatch/Countdown library compatible with AMD | easytimer.js

Easy Timer JS is an easy-to-use Timer / Chronometer / Countdown library compatible with AMD and NodeJS that allows to count up or countdown to a specific value with callback support.

Features:

  • The refresh interval can be configured in tenths of seconds, seconds, minutes, and hours.
  • Sends events when the counter starts to pause and pause and when each type of unit changes.
  • A custom callback can be defined and will be executed in every timer update.
  • Two timer modes: normal and countdown.
  • Configurable starting and goal values.

How to make use of it:

Installation:

# NPM
$ npm install easytimer.js

# Bower
$ bower install easytimer.js

Insert the minified model of the easytimer.js script into the doc.

<script src="dist/easytimer.min.js"></script>

Create a brand new straightforward timer.

var myTimer = new Timer();

Start the timer and achieved.

myTimer.start();

Stop/pause/reset the timer.

myTimer.stop();
myTimer.pause();
myTimer.reset();

Configuration choices:

myTimer.start({
  precision: SECONDS,
  callback: customCallback,
  countdown: false,
  target: target,
  startValues: 0
});

Check if the timer is working.

myTimer.isRunning();

Get the current/whole values.

myTimer.getTimeValues();
myTimer.getTotalTimeValues();

Event handlers.

// myTimer.addEventListener(eventType, callback);
// myTimer.on(eventType, callback);
// myTimer.removeEventListener(eventType, callback);
// myTimer.off(eventType, callback);

timer.addEventListener('secondTenthsUpdated', function (e) {
  // do something
});

timer.addEventListener('secondsUpdated', function (e) {
  // do something
});

timer.addEventListener('minutesUpdated', function (e) {
  // do something
});

timer.addEventListener('hoursUpdated', function (e) {
  // do something
});

timer.addEventListener('daysUpdated', function (e) {
  // do something
});

timer.addEventListener('targetAchieved', function (e) {
  // do something
});

timer.addEventListener('stopped', function (e) {
  // do something
});

timer.addEventListener('reset', function (e) {
  // do something
});

timer.addEventListener('started', function (e) {
  // do something
});

timer.addEventListener('paused', function (e) {
  // do something
});

Easy Timer/Countdown/Chronometer Library, easytimer.js Plugin/Github


See Demo And Download

Official Website(albert-gonzalez): Click Here

This superior jQuery/javascript plugin is developed by albert-gonzalez. For extra Advanced Usages, please go to the official website.

Related Posts

Vector-Graphs-smartGraph

Generating Beautiful Vector Graphs With jQuery | smartGraph

SmartGraph is a free and easy-to-use JavaScript library to create beautiful vector diagrams with many customizations. This plugin allows developers to create dynamic, responsive, draggable vector graphics…

vue-image-slider-transition

Image Slider With 20 Cool Transitions Component | vue-flux

Vue flux is an image slider developed with Vuejs 2 that comes with 20+ nice transitions out of the box. Included transitions 2D transitions Fade: Fades from…

simple-parallax-scrolling

Simple background Image Parallax Scroll Plugin In jQuery

Background parallax effect is a simple jQuery background image without any library. Uses jQuery’s scroll() function to track the scroll event and applies the exact parallax scroll…

bootstrap-color-picker-plugin

Modular Color Picker Plugin for Bootstrap | BS Colorpicker

Bootstrap Colorpicker is a standard color picker plugin for Bootstrap 4. Colorpicker Plugin for Bootstrap 5/4/3 frameworks that allow you to add a color picker to an…

gdpr-iframe-manager-js

GDPR Friendly iFrame Manager In Vanilla JS | iframemanager

IframeMananger is a lightweight JavaScript plug-in that helps you to comply with GDPR by completely removing iframes at first and setting a notice related to that service….

diagonal-slider-anime-js

Diagonal Thumbnails Carousel Slider | Anime.js

Diagonal Slider is a cool mini carousel made with Anime.js JavaScript library. It takes a bunch of pictures and turns them into a circular user interface where…