Monkeyshines

Countdown Timer – JavaScript

Countdown to :

The JavaScript demonstrated here (countdown.js) can countdown to a particular date. If the date is annually recurring (e.g. a birthday), then it’ll countdown to the next occurence; if it’s a specific year (e.g. a holiday, in the vacation sense of the word), when the date has passed it’ll show the time elapsed since that date. It counts down to a fraction of a second after midnight on the given day (JavaScript gets it’s time information from the client’s clock).

This isn’t particularly novel, and much of the code is copied, merged, and adapted from other similar scripts on the web (none of which did exactly what I wanted). I haven’t seen another script that takes a date and automatically works out whether it’s annually recurring, and if not, whether to count down or up, but I daresay it’s been done many times over. The script is heavily dependent on giving it a date in the right format, “Month Day_of_Month[, Year]”, where Month should be specified as text to avoid any confusion about the order of date components. Not an issue with a list box, but if you let users enter data in text boxes you’ll have to do a bunch of checking and formatting, which is altogether too tedious for me to have bothered with.

I don’t think the script needs much commentary – it works out when the day is in relation to today and does some simple maths to display that information in a human-readable format. JavaScript works in milliseconds, which is why we divide by 1000 in various places. The script is actually pretty wordy because I find JavaScript counter-intuitive, and tend towards clarity rather than brevity; but if you prefer the latter it’d be easy to condense it.

It’s easy to add a little pizazz to the countdown by displaying a picture relevant to the date selected, just change the src of the image when the user selects from the list box.


2 Responses to “Countdown Timer – JavaScript”

  1. Gussie Says:

    Wonderful collection. Thanks 🙂

  2. Do it Center Says:

    Neat post – and great domain by the way!

Leave a Comment

:
: (will not be published)
: