Countdown timer jQuery Plugin | Web Muse

Web Development Blog

# Countdown timer jQuery Plugin

Posted on June 5th 2010 by Tom Ellis

This post is out of date as a Project page has been added to replace it. This page may be updated at a future date, in which this notice will be removed.

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 jCountdown plugin.

Include these in the head:

    <script src="script/jquery.js" type="text/javascript"></script>
    <script src="script/jquery.jcountdown1.3.min.js" type="text/javascript"></script>

Initialise it like so:

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

        $("#time").countdown({date:"july 1, 2011"}); //Just date
        $("#time").countdown({date:"july 1, 2011 18:00:00"}); //Date and Time (in 24 hour format)

        //More options
    	$("#time").countdown({
    		date: "july 1, 2011 19:24",
    		onChange: function( event, timer ){

    			/*
    			Tips:

    			event.target is DOM Element
    			this is DOM element
    			$(this) is jQuery Element
    			timer is interval for countdown

    			If a countdown should end early you could do:

    			clearInterval( timer );
    			$(this).trigger('complete');
    			*/

    		},
    		onComplete: function( event ){

    			$(this).html("Completed");
    		},
            minus: false //defaults to false anyway
    		leadingZero: true
    	});
    });
    </script>

Set Html:

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

Set Css (This could be changed to what you want, something like 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 / Configuration

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

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

    //Replaces the following flags with date values
    %{d} = day
    %{h} = hour
    %{m} = minutes
    %{s} = seconds

    //Can specify your own HMTL template for date values to be put in to using flags above
    htmlTemplate: "%{d} <span class="small">days</span> %{h} <span class="small">hours</span> %{m} <span class="small">mins</span> %{s} <span class="small">sec</span>"

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

    //Gets called each time the countdown timer updates
    //Can access element with countdown timer on it, as well as the timer interval itself
    onChange: function( event, timer ){}

    //Gets called when countdown completes
    onComplete: function( event ){} //Can access element with countdown timer on it

    //Whether time should have a leading zero e.g 02 days 01 hours 09 seconds
    leadingZero: false

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

Updated: 4th April 2011

- Fixed bugs
- Added new options
- Improved logic, a lot!

Updated: 26th May 2011

- Fixed bug (Thanks to Max Kovalenkov for the help)
- Moved some variable declaration to top of script

Updated: 9th June 2011

- Added callback function support for change/complete events
- Added support for double digits
- Improved code logic a bit more
- Plugin Version now 1.2

Updated: 11th July 2011

- Added methods
- Improved code logic a bit more
- Plugin Version now 1.3

And that’s a jQuery jCountdown Plugin. Functionality will be improved at a future date.

This post is out of date as a Project page has been added to replace it.

This entry was posted in Blog. Bookmark the permalink.

Comments are closed.

- ### Latest Posts

  - That -webkit- prefix talk
  - jCountdown UI – jQuery UI Widget
  - Features and enhancements wanted for jcountdown 1.5
  - CSS Level 4 Selectors in depth
  - Latest browsers you should support
- Donate via Paypal (Donations will go to running this website):