Install:
Download the jQuery timer plugin and put it in a SCRIPT tag in your HTML page after jQuery itself.
Start a timer:
$('#divId').timer(); //Same as $('#divId').timer('start')
Start at a particular time:
$('#divId').timer({
seconds: 100 //Specify start time in seconds
});
Pause:
$('#divId').timer('pause');
Resume:
$('#divId').timer('resume');
Remove Timer:
$('#divId').timer('remove');
Get number of seconds:
$('#divId').data('seconds');
Get notified:
//start a timer & execute a function in 5 minutes & 30 seconds
$('#divId').timer({
duration: '5m30s',
callback: function() {
alert('Time up!');
}
});
Get notified:
//start a timer & execute a function every 2 minutes
$('#divId').timer({
duration: '2m',
callback: function() {
alert('Why, Hello there');
},
repeat: true //repeatedly calls the callback you specify
});
Repeat callback & reset timer:
//start a timer & execute a function every 30 seconds and then reset the timer at the end of 30 seconds.
$('#divId').timer({
duration: '30s',
callback: function() {
console.log('Timer will reset!');
$('#divId').timer('reset');
},
repeat: true //repeatedly call the callback
});
Format:
By default the timer will display a pretty output (30 sec OR 1:06). You can change this format if you like.
// Show a digital timer instead of pretty timer:
$('#divId').timer({
format: '%H:%M:%S' Display time as 00:00:00
});
// OR
$('#divId').timer({
format: '%h:%m:%s' Display time as 0:0:0
});
// OR
$('#divId').timer({
format: '%M minutes %s seconds' Display time as 3 minutes 45 seconds
});
Update frequency: By default the timer display updates every 500ms to show an accurate update of time. You can change this by specifying the update frequency in milliseconds.
$('#divId').timer({
updateFrequency: 2000 // Update the timer display every 2 seconds.
});