I’ve created a new jQuery Plugin that counts down to a specific date in the future. It has a cool animation that scrolls the numbers down instead of just changing the time without an animation. The plugin is pretty easy to use it accepts a few basic options that should give you most of the flexibility that you would need.

Updated*

  • Added ability to have units of time as separators instead of just :.
  • Added option speed to specify how quickly a unit of time increments.

Download The Plugin

To view a live implementation of the countdown timer, check one out here on a coming soon page. If your feeling up to it, go ahead and subscribe to the mailing list too. I don’t think you’ll want to miss it.

The source code for the timer is hosted on github at https://github.com/zackperdue/Countdown

If you use git:
[email protected]:zackperdue/Countdown.git

or Download Countdown Timer

Countdown Options

var defaults = {
		target: 'September 24, 2011',
		parts: ['days', 'hours', 'minutes', 'seconds'],
		separator: ":",
		leadingZero: true,
		height: 180,
                speed: 200,
	}
  • target: the future anticipated date used to count down to.
  • parts: An array of units of time you would like to include, for example: days, hours, minutes, and seconds.
  • separator: The visual separator you would like to divide the units of time with. Default is :. Other choices are short OR full. If you use short as the separator, the separators will be the first letter of each unit of time they represent (d, h, m, s). If you use full as the separator, the separators will be the unit of time entirely like this (Days, Hours, Minutes, Seconds).
  • leadingZero: Do you want a zero appended to the units of time? True or False.
  • height: The height of the numbers. This is important for the timer to scroll correctly.
  • speed: The speed in which the units of time transition in Milliseconds. Default is 700 Keep this under 1 second as the timer could become inaccurate.

It’s Easy To Use

To use the timer plugin, all you need to do is add an html element with designated as a timer like so:

<div class="timer"></div>

Then include the script below the jQuery script and choose your element and specify the options:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://yourdomain.com/assets/js/jquery.countdown.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.timer').countdown({
				target: "October 31, 2011 00:00:00", 
				parts: ['days', 'hours', 'minutes', 'seconds'],
				separator: ":",
				leadingZero: true
			});
		});
	</script>

Below is a picture of an actual application that I was using it in.

Something Epic Is Coming

Known Bugs

  • Countdown seems to speed up after being in another browser tab
  • Sometimes in Google Chrome the timer ticks one second and then stops. Refresh to fix it.

Future Revisions

Leave Some more suggestions in the comments of some extra features you would like to see in later releases. Here are some features I will be adding soon.

  • Add options for animation speed
  • Add Hooks for zero hour for the countdown date Implemented Mon, Apr 1st 2013

Can You Contribute?

Yes! I would love for you to help me make this plugin better. If you would like you may fork it on Github and make a pull request with your changes and improvements. Leave some comments on what you think of the plugin either here or on the github page. Enjoy your countdowns!