jQuery timer plugin | Start an editable pretty timer inside any HTML element

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() {
        $('#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
});

Change display format dynamically: If you'd like to change the format of the timer display, you can do so by defining a callback function that udpates the timer's format after a specific duration.

$('#divId').timer({
	duration: '61s', //since 3599 is divisible by 59 or 61
	seconds: 3590, //simulation purposes
	format: '%M:%S',
	callback: function() {

		var total = timerWithCallDuration.data('seconds');

		if(total === 3599) { //change to hour format (3600 - 1 to prevent display bug)
			this.format = '%H:%M:%S';
		}
	}
});

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

Countdown: You can set up a fixed duration countdown timer by setting the countdown property to true.

$('#divId').timer({
	countdown: true,
	duration: '25m'	// Set the duration to 25 minutes
});

Download jQuery timer plugin

jQuery Timer

Try it out

Are you a JavaScript programmer who likes Music?

How to