|
JQuery Countdown timer Plugin example |
||||||||
I'd previously used a JavaScript script to count down from a now() to a given date to display real time count down information on screen. I was cleaning up the project it was used on and wondered how easy it would be to push all the 'normal' JavaScript into a JQuery plugin and encapsulate it all into one function call.
Let me start off by saying this is the first script I've bothered to convert from traditional JavaScript into a more friendly JQuery format. It may not be anywhere near best practice for plugins, so feel free to point out the shortcomings. (Also I never checked if there is an existing plugin that does anything similar).
Both versions work in exactly the same way, and I probably cut about a third of the code base so I'm quite happy with the result.
2
3$(document).ready(function() {
4 // create a new date and insert it
5 var myDate = new Date(2012,11,25,0,0,0)
6 $.countdown('#countbox', myDate);
7});
8
9<h1 id="countbox"></h1>
Just include the JQuery file and call the $.countdown function. The function takes two arguments, a selector and a date object. The returned response will be written into the element you pass in as the selector.
You can view a demo below, or download the whole thing.
JQuery Countdown plugin example
Download the JQuery Countdown plugin
Glad you liked the script. I was quite surprised how straight forward I could get things. I think the key here was iteration. I just kept going through the code finessing it each time.
You could two new arguments to the plugin, one could be a direction (up or down) and the other could be an offset, or starting point. In this way you could enable it to not stop at '0' but carry on to wherever you specify.
I'll have a play with it and see what comes up.
with this great countdownscript for jquery you saved me a lot of time.
I'm just working on a new site and with only a few small modifications it interacts great with a jquery progressbar.
Thanks that you posted it.
Glad that you liked it. Do you have a link to where you have used it?
The page is not open for everyone yet so just send me an email and i will send you the link.
I hope it's not a problem that the page is in german.
No thats fine, my German isn't great but I'll drop you an email so you can send me the link through, its always interesting to see how other developers use your examples.