jQuery Countdown Timer Plugin

I’ve had the idea for a countdown timer for a while now. So the last couple of weeks I’ve been plugging away at one. I have sorted out some interesting issues with it. Basically keeping time with Javascript is a pain but I think I’ve solved it. Here it is my jQuery Coundown Timer Plugin. I have tried to make it as flexible and reliable as I could. Unfortunately I could only get it down to about 23KB (9KB compressed) compressed, but I think that’s ok.

The biggest challenge was getting the clock to show proper time (as opposed to a “calculated” time). I have managed to do this by recalculating the remaining time and re-initialising the clock every minute. The loss of time through the Javascript loop each minute is small, but does add up over time. Re-initialising the clock once a minute has no impact on the animation and makes the clock keep good time. Also I have put an event handler on it to re-initialise the clock on window focus, so when you move to another tab and then come back to the tab with the clock on it, it will show the correct time.

In true plugin style, you will be able to set multiple clocks with different times on the one page. The only problem you may encounter is a loss of performance if there are too many animations going at once.

There are a number of options, with several more in the works. First, I’ve made the date string as flexible as I can:

• You can define your date format (10 options to choose from).
• Define your clock ‘finished’ message
• set the height and width of the clock digits
• Define what units you want to show. Each unit type can be turned on/off as you desire

I will be adding in support for different timezones, extended date formating, animations speeds and maybe even different easing effects – all of which will be quite easy to implement. These will come over the following days and weeks.

In the meantime, enjoy the demo, which is set to 10 years and 2 seconds in the future. As usual I have put it on my Github Account so that the code is readily available. Enjoy!