Web Design Tutorial – Christmas Countdown using Jquery

This week I stumbled across an really great project on Github, where folks are working on a jQuery countdown. Aside from the obvious use for the countdown ’til Santa comes down the chimney, it could also be put to great use on ecommerce websites as countdowns until the end of sales and/or special offers.

I’ll be putting it to use in a web design shortly!

It’s really easy to use, and you have the choice of appointing a time to start (and countdown from) or set a date for it to end.

Which ever option you want to go with, you’ll need to include the jQuery library and the Countdown Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/countdown.js"></script>

To set a date (like Christmas Day!), you need to set a variable:

var _date = new Date();
_date.setMonth(11);
_date.setDate(25);
_date.setHours(09);
_date.setMinutes(0);
_date.setSeconds(0);

It’s important to note, with regards to the date, that the Javascript setMonth method starts at zero – January = 0, February = 1 and so on until December, which is 11.

After that it’s as simple as defining your image! There are other options as well, which you can find on the GitHib page. Enjoy!

$('#counter').countdown({
            startTime: _date,
            stepTime: 1
            image: "/digits.png"
        });