I was looking for one of those javascript date counters we’ve all seen a million times and came across a bunch. Each had its own unique twist but not too many were flexible. I realized it would be way more fun to just write my own. In doing so, I wound up with a wonderful little project on my hands. I decided to make it completely scalable and customizable. The counter was designed to fit just about any situation, it’s lightweight & completely unobtrusive, plus it has a wide range of user-defined options you can tweak.

Introducing the BK Countdown, a light-weight, easy to use, fully customizable javascript countdown class for jQuery!

Nothing beats free, flexible, and open source!

Here’s a list of what it can do.

• It is really easy to use. Simply add one line of javascript and an element to your page, BK Countdown will do the rest.
• Full CSS support: every detail can be customized, even unique styles for pages featuring multiple countdowns
• Formatting control: choose the order of the display (Label + Spacer + Value, or reverse it)
• Element control: choose what elements are created to display the counter values (default is span)
• Messages: set a separate message for the day of and afterward (such as “Today is the day” and “the event is over”)
• Open Source: the code is yours to modify and use, just give me credit. Plus if you end up doing anything cool with it, keep me informed – I’d like to see! (Licensed under the GPL Version 3 license)

UPDATED Jan 9, 2013 I took care of a few bug fixes, mostly to fix things that came up in older browsers. Please upgrade old versions to the current 1.1 release attached below.

Creating a Countdown

Creating a coundown requires one line of code.

var countDown = new BK_CountDown('element', 'MM/DD/YYYY', 'HH:MM:SS', options );

To add it into a page simply create a new countdown inside the jQuery $(document).ready() function:

$(document).ready(function() { 	var myCountDown = new BK_CountDown('#myCountDownDiv', '08/05/2012', '12:00');  });

The code above initializes the counter when the page is ready, and from there the counter will do the rest. All you need to add to your page is the element in which you want the counter to reside. For this example I chose a div.

Variables

There are 3 required variables

• container: id of the element you are creating the counter inside of
• targetDate: Date you are counting toward. Format: MM/DD/YYYY
• targetTime: Time you are counting toward (seconds are optional). Format: HH:MM:SS, hours are 0-23

Options

There are several options you can set which allow for various kinds of customization.

• order: 1 (default) or 2. This is the element display order. 1 = Label + Spacer + Value 2 = Value + Spacer + Label
• spacer: text/string separator between label and value
• element: html element for label and value containers (default is span)
• end: Message to display when date has passed
• dayOf: Message to display on day of counter expiration

Examples & Download

Download Latest version from GitHub

Examples:

• standard
• reverse order
• some css applied
• multiple countdowns on the same page + unique css