Minimal Stopwatch & Timer Plugin For jQuery

Minimal Stopwatch & Timer Plugin For jQuery
File Size: 24.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A clean and simple jQuery stopwatch/timer plugin which allows you to count up from zero or a certain time with start, pause and resume controls.

Basic Usage:

1. Create a container for the stopwatch/timer.

<div id="t" class="badge">00:00</div>

2. Create a control button which allows to start, pause and resume the timer in one button.

<button id="btn">Start</button>

3. Load the jQuery library and jQuery timer plugin at the end of your page.

<script src=""></script> 
<script src="dist/timer.jquery.min.js"></script> 

4. The timer action.



case "start":
action: 'start', 
seconds: 0
$("input[name='s']").attr("disabled", "disabled");
case "resume":
case "pause":
//you can specify action via object
$("#t").timer({action: 'pause'});



5. Style the timer and control button via CSS.

.badge-important {

5. Available settings and callbacks

// default seconds value to start timer from
seconds: 0,

// this will let users make changes to the time
editable: false,

// this will enable stop or continue after a timer callback
restart: false,   

// duration to run callback after
duration: null, 

// callback to run after elapsed duration
callback: function() { 
  alert('Time up!');

// this will repeat callback every n times duration is elapsed
repeat: false,

// if true, this will render the timer as a countdown if duration > 0
countdown: false, 

// this sets the format in which the time will be printed            
format: null,

// How often should timer display update
updateFrequency: 1000,            
state: 'running',

// more callbacks
startTimer: function() {},
pauseTimer: function() {},
resumeTimer: function() {},
resetTimer: function() {},
removeTimer: function() {},

6. Public methods.

//pause an existing timer

//resume a paused timer

//remove an existing timer
$("#div-id").timer('remove');  //leaves the display intact

//get elapsed time in seconds

Change logs:

v0.6.5 (2016-03-23)

  • Incremental improvements

v0.6.3 (2016-07-05)

  • Fixed redundant early return

v0.6.2 (2016-06-17)

  • (fix) Object.assign issue on mobile
  • Removed all Object.assign instances

v0.5.3 (2016-06-10)

  • Add support for days

v0.5.2 (2016-06-08)

  • (fix) countdown pause issue

v0.4.14 (2016-05-15)

  • Fixed Timer problem Reset

v0.4.10 (2016-01-30)

  • Fixed reset timer & added test for reset.

v0.4.9 (2016-01-16)

  • Fixed issue where empty args did not translate to start

v0.4.4 (2015-12-27)

  • Added AMD support for requirejs

v0.4.3 (2015-08-04)

  • FIXED: Pausing, editing the time, and resuming could update the duration to reflect new time

v0.4.2 (2015-06-17)

  • Improvement added: Customize timer display update frequency

v0.4.1 (2015-04-25)

  • Added functionality to get the current state of the timer.
  • Fixed a callback issue when seconds parameter is also passed along with duration parameter


  • Added functionality to edit timer
  • Revamped timer.start and added testing ground


  • Switched to nullifying data object from element instead of $.removeData on clearing timer


  • Added repeat callback notification functionality


  • Added function to convert pretty time to seconds


  • Added a check to see if timer is running. Tweaked CSS for demo. 


  • added feature to display time in a verbose fashion
  • added timer value in seconds to a data attr on the element itself

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