Minimal Count Up Timer (Stopwatch) Plugin For jQuery - Countimer

Countimer is a tiny, easy-to-use jQuery plugin to create a highly customizable Count Up Timer (Stopwatch) that could be useful for everyone who needs a simple counter.

Installation:

# NPM
$ npm install countimer

# Bower
$ bower install countimer

How to use it:

1. Link to the needed jQuery and moment.js JavaScript libraries as these:

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/moment.min.js"></script>

2. Link to the jQuery countimer plugin's script:

<script src="ez.countimer.js"></script>

3. Create a container element to place the count up timer.

<div class="timer"></div>

4. Activate the count up timer with default settings.

$('.timer').countimer();

5. All default plugin settings to customize the count up timer.

$('.timer').countimer({

  // In seconds : 0
  // In minutes: 1
  // In hours: 2
  displayMode : displayMode.FULL,

  // Enable the timer events
  enableEvents: false,

  // Display the milliseconds next to the seconds in the full view
  displayMillis: false,

  // whether to remove the HTML element from the DOM after destroy
  destroyDOMElement: false,

  // Auto start on inti
  autoStart : true,

  // Show hours
  useHours : true,

  // Custom indicator for minutes
  minuteIndicator: '',

  // Custom indicator for seconds
  secondIndicator: '',

  // Separator between each time block
  separator : ':',

  // Number of leading zeros
  leadingZeros: 2,

  // Initial time
  initHours : 0,
  initMinutes : 0,
  initSeconds: 0

});

6. Control the count up timer with the following API methods.

// start the timer
$('.timer').countimer('start');

// pause the timer
$('.timer').countimer('stop');

// resume the timer
$('.timer').countimer('resume');

// return a boolean if the timer has been stopped
$('.timer').countimer('stopped');

// get the current time
$('.timer').countimer('current');

// destroy the timer
$('.timer').countimer('destroy');

7. Event handlers.

$('.timer').countimer({
  enableEvents: true
}).on('hour', function(evt, time){
  // every hour
});

$('.timer').countimer({
  enableEvents: true
}).on('minute', function(evt, time){
  // every minute
});

$('.timer').countimer({
  enableEvents: true
}).on('second', function(evt, time){
  // every second
});

Changelog:

2018-12-31

• v1.1.0: Added more options and methods.

---

This awesome jQuery plugin is developed by envynoiz. For more Advanced Usages, please check the demo page or visit the official website.