jQuery Timer


Try it out


Download plugin | ★ Star this project on Github

How to

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 repeatedly:
//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.
});

Download jQuery timer plugin

Fork me on GitHub