jQuery Timer plugin
- Lightweight, well tested
jQuery pretty timer plugin
- Start, Pause, Resume and Remove a timer inside any HTML element.
- Get notified after specific time or at regular intervals.
- Click and edit time while timer is running!
- Enable multiple timers on the same page.
Demo & Instructions | Download
Getting started
Load the plugin in a script tag (right after loading jQuery) directly from CDNjs using this URL,
https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.7.0/timer.jquery.jsIf you are using bower,
bower install timer.jqueryAlternatively you can download the jQuery timer plugin and host it relative to your HTML file. Once you have your preferred way to get jquery and the timer plugin, in your web page:
<script src="path/to/jquery.js"></script> <script src="path/to/timer.jquery.js"></script> <script> (function($) { //start a timer $("#div-id").timer(); }()); </script>Usage
To start a timer with options:
$("#div-id").timer(options);Options for timer:
$("#div-id").timer({ seconds: {Int}, // The number of seconds to start the timer from duration: {String}, // The time to countdown from. `seconds` and `duration` are mutually exclusive callback: {Function}, // If duration is set, this function is called after `duration` has elapsed repeat: {Bool}, // If duration is set, `callback` will be called repeatedly format: {String}, // Format to show time in editable: {Bool} // If click and edit time is enabled hidden; {Bool} // If true, the timer is not displayed in the selected item. });Methods available on an initialized timer:
//pause an existing timer $("#div-id").timer('pause'); //resume a paused timer $("#div-id").timer('resume'); //remove an existing timer $("#div-id").timer('remove'); //leaves the display intact //get elapsed time in seconds $("#div-id").data('seconds');Timed Events
Start a timer and execute a function after a certain duration. You can use this to simulate a timed event.
//start a timer & execute a function in 5 minutes & 30 seconds $('#div-id').timer({ duration: '5m30s', callback: function() { alert('Time up!'); } }); Start a timer and execute a function repeatedly at a certain duration.
//start a timer & execute a function every 2 minutes $('#div-id').timer({ duration: '2m', callback: function() { console.log('Why, Hello there'); //you could have a ajax call here instead }, repeat: true //repeatedly calls the callback you specify });Start a timer and execute a function repeatedly at a certain duration and then reset the timer.
//start a timer & execute a function every 2 minutes $('#div-id').timer({ duration: '2m', callback: function() { $('#div-id').timer('reset'); }, repeat: true //repeatedly calls the callback you specify });Timer state
You can get the current state of timer by querying the state property on it's data object
$('#div-id').data('state'); // running | paused | stopped | removedDuration Syntax
When you initialize a timer with the duration and callback parameters, the timer plugin executes the callback function at the set duration. The syntax for specifying the duration is verbose. h for hours. m for minutes and s for seconds. Here are some examples:
'3h15m' // 3 hours, 15 minutes '15m' // 15 minutes '30s' // 30 seconds '2m30s' // 2 minutes 30 seconds '2h15m30s' // 2 hours 15 minutes and 30 secondsFormat Syntax
By default the timer displays the biggest whole unit. Examples:
seconds: 50will show as50 secseconds: 63will show as1:03 minseconds: 3663will show as1:01:03
If you want to customize the format in which the timer displays time, use the format option. Available formats the timer understands are:
| Format | Description | Example |
|---|---|---|
%h | Non-zero padded Hours | %h hours gives 3 hours |
%m | Non-zero padded Minutes unless number of minutes is greater than 60 | %h:%m minutes gives 0:6 minutes or 1:06 minutes |
%g | Non-zero padded Total Minutes Irrelative to hours | %G minutes gives 75 minutes or 6 minutes |
%s | Non-zero padded Seconds unless number of seconds is greater than 60 | %h:%m:%s gives 0:0:6 or 0:1:06 or 1:01:06 |
%t | Non-zero padded Total Seconds Irrelative to minutes and hours | %t gives 3660 or '9' |
%H | Zero padded Hours | %H hours gives 03 hours |
%M | Zero padded Minutes | %H:%M minutes gives 00:06 minutes |
%G | Zero padded Total Minutes Irrelative to hours | %G minutes gives 75 minutes |
%S | Zero padded Seconds | %H:%M:%S gives 00:00:06 |
%T | Zero padded Total Seconds Irrelative to minutes and hours | %T gives 3660 |
Countdown
You can use the jQuery timer plugin for countdown as well.
$('#timerDiv').timer({ countdown: true, duration: '3m40s', // This will start the countdown from 3 mins 40 seconds callback: function() { // This will execute after the duration has elapsed console.log('Time up!'); } });
