Saturday 05 June 2010 - Countdown timer jQuery Plugin


jQuery Plugin that turns an element into a date countdown timer

I have made a simple jQuery Plugin that countdowns how long it is from a date. This can be used to countdown to a release date of a game, a Dvd or to a party. By default the countdown timer updates every second using the Javascript setInterval() function. When the time is reached the time stays at  0 hours 0 days : 0 minutes : 0 seconds  for example rather than going in to the minus values such as -1  hours. Also when the time is reached or surpassed the interval is then cancelled as it is not needed to run. 

Below will show how to use the jQuery Countdown Timer plugin.


Include these in the head:


<script src="script/jquery-1.4.js" type="text/javascript"></script>
<script src="script/jquery.countdown.js" type="text/javascript"></script>


Initialise it like so:


<script type="text/javascript">
$(document).ready(function() {

$("#time").countdown({date:"july 1, 2010"});
});
</script>

Set Html:

<p id="time"></p>

Set Css (This could be changed to what you want, this is just used in the example):

p#time{
color:#c21017;
text-align: center;
}


p#time span{
display:inline;
color:#222222;
font-size:0.8em;
}

Options



date: 'June 11, 2010', //Date to countdown to

updatetime: 1000, //Time to update timer (milliseconds)

minus: false //If countdown timer should go into minus values instead of 00:00:00:00 when countdown time has passed


You can also download an example (.zip) here 

Updated: 27th November 2010

  • Now supports minus values on date if date has already been met
  • Fixed errors in plugin working in IE
  • Logic of code improved

And that's a jQuery Countdown Timer Plugin. Functionality will be improved at a future date. Any queries or suggestions email me at admin@webmuse.co.uk
Tom.