jQuery Timer Plugin
20. February 2012
Time does not change us. It just unfolds us.
-Max Frisch
I m happy to post about my first ever jQuery plugin. This plugin will allow you to add a simple timer to a HTML element like DIV or SPAN or any other valid display element. You can style this element to show the timer in a nice way 
Currently this plugin has 3 self explainatory methods to interact with it:
- $(“#divId”).timer(“start”); -> this will initialize the timer inside the div with id = “divId”. You can even pass in the number of seconds you’d like to start the timer at, like this, $(“#divId”).timer(“start”, 2500);
- $(“#divId”).timer(“pause”); -> this will pause a started timer
- $(“#divId”).timer(“resume”); -> and this will obviously resume a paused timer.
Make sure to include the latest jQuery file and this plugin file in your HEAD section. Click here for a demo of this plugin. Download the zipped folder (includes the plugin + demo HTML page) from GitHub. Here’s the script itself.
Pingback: 5 Cool jQuery Timer Plugins
Hey thanks for this. Very useful!
can this go per hour?
Hello Kel, yes this can go per hour, inside the function incrementTime(), increment the secs var by 3600
how about multiple instances of timer… i can’t seem to make it work…
To make multiple timers work, you ll need to specify a class for each of the html elements you wish to run the timer in. Let’s say you assign class=’timer’, then you can make all timers work by calling
$('.timer').timer('start')If you are trying to start 2 or more timers at the same time, then I d rather you avoid doing so. Here s an article by John Resig that provides the appropriate explanation for this.
Other than that, if you d like to see multiple timers in action, you could check it out on my task/time management web app Trackosaur