DHTML Easy Countdown — v1.53

Summary

An easy-to-use DHTML counter that counts down to a date and once it gets there counts up again. Simply download, add some simple HTML to your page and you're done — it's designed to be that quick. No knowledge of javascript required, no javascript to edit. The displayed countdown is designed to be styled in CSS so you can easily style it to your requirements. Below are a few live examples with various arbitrary stylings. Download the script and follow the instructions below.

Features

  • Easy to use; No need to edit any Javascript at all, only needs simple HTML
  • Multiple counters: You can have as many counters in a webpage as desired
  • The counter always stays in step with the computers clock and won't “tick” any faster or slower
  • Each counter can be styled independently — this is performed through the use of CSS. If you don't know CSS then you may still use your old-fashioned <font> tag, but you really should make the switch to CSS for more reasons than you currently know about! HTMLDog.com has a good tutorial on how to start using CSS in your webpages and W3Schools has a reasonable tutorial on CSS too.
  • It's accessible to everyone. Users without javascript still get to see the date that is being counted down to, so no information is lost for those users that either choose not to have javascript enabled, or that don't have that capability because they use special-needs web browsers, etc.
  • Written by a professional web programmer to follow best practices in HTML, CSS, client-side script and accessibility.
  • Supported by Internet Explorer 5+, Netscape 6.0+, Mozilla (including Firefox and other 'gecko-based' browsers), Opera 7+, Safari, Google Chrome and should function in many other browsers too.
  • An advanced version is available with multiple customisations (it's also free)

Examples

In the following examples the countdown date is “2014-09-03 00:00:00 GMT+00:00” — so the counters will show the time remaining until midnight GMT. The same date has been used for all of the counters merely for comparison purposes, in reality you can have any number of counters count down to any number of dates all running together on the same page. Some of the examples below may not appear exactly as intended since they depend on the computer having specific fonts installed.

“Big panel” with a serif font:
2014-09-03 00:00:00 GMT+00:00
“Tiny panel” with a sans-serif font:
2014-09-03 00:00:00 GMT+00:00
Eurostile - requires user to have the “Eurostile” font on their system:
2014-09-03 00:00:00 GMT+00:00
Hand-written style — if fonts available:
2014-09-03 00:00:00 GMT+00:00
Sans-serif - a general sans-serif styling in a centred panel:
2014-09-03 00:00:00 GMT+00:00
Fun style — if fonts available:
2014-09-03 00:00:00 GMT+00:00
No styling, displayed “as is”:
2014-09-03 00:00:00 GMT+00:00

Styling Note

Of course you can style the counter however you like — you can probably do a much better job of styling them than I can! Fixed-width fonts work best. You should specify several similar font family names for a given counter, that way you have a good chance that the person viewing your webpage and counter has one of those fonts available on their computer, this is the approach I've taken with some of the above examples.

Download The Script

Download the script [1.74 KB], then upload it to your own website. The simplest way to get the script working is to upload the script into the same folder as the web-page that will be using it. The instructions below are written with this location for the uploaded script in mind. This version of the script has been 'reduced' to make it download faster for your visitors, if you would like a copy that can be read and edited you can download the expanded version [4.94 KB].

Note: If you are unable to upload files to your web hosting provider, maybe because you're using MySpace or Blogger (etc), then check out the notes at How do I use the countdown if I have a MySpace / Blogger or similar account?

Note: If you don't know how to upload a file to your website (seriously, I do get asked such questions!) then I also recommend the FileZilla client for doing the actual upload to the website. Contact your hosting provider for the FTP account details you need if you don't know them already.

Instructions

Download
Download the script (see above) and follow the instructions on uploading it to your own website.
Include The Script In Your Webpage

Open your webpage in a plain text editor (like Notepad, XEmacs, Textpad, etc.) and find the “</head>” part (the closing HTML “head” element). E.g. in the following example this would be the 6th line:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
    <title>My webpage</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>

Before this “</head>” element insert a “script” element exactly as shown below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
    <title>My webpage</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="countdown.js" defer="defer"></script>
</head>
<body>

In other words above the “</head>” line insert:
<script type="text/javascript" src="countdown.js" defer="defer"></script>

This HTML you have just added makes the Countdown script available to the webpage. It will only work though if you have uploaded the script to the location specified in the “src” part — “countdown.js”. In the above example we assume that you have uploaded the “countdown.js” script into the folder where the web-page you are editing also lives. However, for your website you may need to upload the script to a different directory, which will mean that the “src” part would also need changing.

Make sure this “src” part is correct for the location you have uploaded the script to on your website. This is very important as if you use the wrong location in the “src” attribute the countdown will simply not work at all — with no errors or warnings. This is where many people make an error.

Create Some Countdown HTML

The script is now included in your page, all we need to do now is specify a point in the page where we want to show the counter. Here's my example:

<body>
    <h1>New Year 2011 Is Coming!</h1>
    <p>
        Counting down to New Year 2011: <span id="countdown1">2011-1-1 00:00:00 GMT+00:00</span>!
    </p>
</body>
</html>

The important bit is the “<span id="countdown1">2015-01-01 00:00:00 GMT+00:00</span>” part.

See If It Worked
Save your modified webpage, upload it to your website and open it in a web browser that supports javascript and has javascript turned on (!), then the counter should automatically start counting down to the start of next new year.
Problems?
See the next section on Troubleshooting
Multiple Counters
See the Multiple Counters section below

Troubleshooting

Timezones - IMPORTANT
You need to set the timezone properly in order for the script to countdown correctly. See below “What Kind Of Dates Can I Use?”.
It Didn't Work But A “*” Did Appear After The Date!
If you saw this asterisk it means that the script is working fine but couldn't understand the date format you specified. This is likely because the date was invalid — see below on how to correctly format a date.
Nothing Happened At All, Not Even A “*
Oh dear, lets re-check the steps above: First you downloaded the “countdown.js” script from this webpage to somewhere on your computer. You then started an FTP program or a webpage-based file uploader. You uploaded the “countdown.js” script into the same folder as the web-page that will display your countdown. In your webpage you copied and pasted the “<script type="text/javascript" src="countdown.js" defer="defer"></script>” HTML into the head section of your webpage HTML and copied the “<span id="countdown1">2015-1-1 00:00:00 GMT+00:00</span>” countdown placeholder HTML somewhere between the webpage body tags. You then saved the changes to your modified web page and uploaded that to your webspace as well.
Still Nothing Happened

Perhaps the browser cannot load the script because it cannot find it on your webserver. We'll try and modify the “src” attribute on the script tag and see if that cures the problem. Go to your web browser and type in the address that allows you to download the script from your own website. E.g. if your website's homepage is “http://www.geocities.com/Tokyo/99999/index.html” then if you entered the following address into your browser: “http://www.geocities.com/Tokyo/99999/countdown.js” the web browser should either prompt you to download the script from your website or try and display it. Once you have found the right address that causes this to happen copy it from the address bar. Then go back to your webpage HTML and modify the “src” attibute on the “script” tag, changing it from:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
  <title>My webpage</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <script type="text/javascript" src="countdown.js" defer="defer"></script>
</head>
<body>

to (ignore the linebreak in the script tag):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
  <title>My webpage</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <script type="text/javascript"
src="http://www.geocities.com/Tokyo/99999/countdown.js" defer="defer"></script>
</head>
<body>

Save the webpage again, upload it again to your website and refresh the page using “CTRL-R”. As a last resort try removing any other scripts that you have running on the same page and see if that helps.

The script doesn't work and I'm using Internet Explorer 6 or 7

Scroll to the top of the page and see if there's a yellowish bar running across the screen. If it's there then you've fallen foul of Internet Explorer's script blocking feature. This feature is intended to help protect users from malicious scripts, but is poorly implemented and will block many scripts that present no security risk whatsoever. There is no security risk from using my countdown script(s), it's just that IE6/7 isn't intelligent enough to decide if a script might be harmful or not and so blocks pretty much everything. If you want the countdown to run you'll have to click the yellow box and choose to permit scripts to run.

What Kind Of Dates Can I Use?
The correct format for dates to use in your HTML is as follows:
YYYY-MM-DD HH:MM:SS GMT±HH:MM
e.g. “2014-09-03 00:00:00 GMT+00:00
  • YYYY” = 4-digit year, e.g. 2015
  • MM” = month as a number, e.g. “1” or “12”
  • DD” = day of the month as a number, e.g. “8” or “31”, etc.
  • HH” = hours in 24-hour format, e.g.: “0” or “23”
  • MM” = minutes, e.g.: “05” or “54”
  • SS” = seconds, e.g.: “00” or “37”
  • ±HH:MM” = timezone difference ahead of GMT in hours and minutes, e.g. “-05:00” (EST), “-04:00” (EDT), “+05:30” (IST).
    West of Greenwich, England is usually negative, East is usually positive.
How do I work with timezones?

Timezones can make your head hurt. The one important rule is that you:
Use the timezone as it will be at the event you're counting down to.

For example:
Pretend that your current timezone is EDT (Eastern Daylight Time) — this would be because we are pretending that it is summer time and also that you live on the East-Coast of the USA.

Now, you decide that you want to create a countdown timer counting down to the New Year celebrations next year. However, New Year for you would actually occur in the EST (Eastern Standard Time) timezone because New Year is in winter and the clocks will change in the Fall.

We remember the golden rule that you use the timezone as it will be at the event you are counting down to. This would mean that your countdown date and time should use the EST timezone (GMT - 5 hours), so the countdown date you would use would end in “GMT-05:00” making your countdown HTML look as follows:

<span id="countdown1">2015-01-01 00:00:00 GMT-05:00</span>

Your timezone:
To get an idea of your actual current timezone check your computer clock, newspaper or the notes at the start or end of a diary. Alternatively I can attempt to guess your current timezone for you, and if and when your clocks change with daylight saving. To do this simply browse to the timezone page. A random web search for lists of timezones for various locations around the world found these resources, amongst many others:

Multiple Counters

If you would like multiple countdown timers on the same webpage then it's really easy. Create some more countdown HTML and change the number in the id tag like so:

<body>
    <h1>New Year Is Coming!</h1>
    <p>
        Counting down to New Year 2011: <span id="countdown1">2011-1-1 00:00:00 GMT+00:00</span>!
    </p>
    <p>
        Counting down to New Year 2012: <span id="countdown2">2012-1-1 00:00:00 GMT+00:00</span>!
    </p>
</body>
</html>

IMPORTANT NOTE: there must be a timer in your webpage with “id” "countdown1", and any other countdown timers must have different but consecutive numbers with no gaps, e.g.: "countdown1", "countdown2", "countdown3", "countdown4", …, "countdownn". Duplicate “id”s are not allowed.

There is no limit to the number of counters you can display in a webpage.

Miscellaneous

Can I use a different HTML element for a countdown timer, does it have to be a span element?
Use any element you like as it is only the “id” and its value that is important. This means that you could put the “id” attribute on a “div”, a form “input” box, a form button, an “h1” element, a table cell, anything you like. For most uses a “div” element is probably better than a “span” element.
Can I hide the counter until the page has finished loading?
Yes, when the countdown starts after the page has finished loading it automatically updates the counters visiblity property to “visible”. This means that you could add the styling property: “visibility: hidden;” to a counters “style” attribute, the counter will then be hidden and only made visible once the counter starts. The problem with hiding the counter in this way is that users without javascript, or with javascript turned off, won't see the countdown date at all as it will always remain “hidden” and this may make the webpage inaccessible — therefore this practice is best avoided.
What does the counter look like when it counts up?
Example: Time since this page was last updated: 2008-10-20 19:29:00 GMT-01:00
When the script runs the counter seems to “flash”
This effect is solely caused by the type of web browser you use and the speed of the computer, it isn't something that I can fix.
Briefly how does this actually work?
Once the page has loaded, the script looks for any HTML element with the “countdown1” id attribute on it, if it finds one then the contents of the element (i.e. the date text) are parsed into a date object. If the the date format can be deciphered then the ticking and drawing routines are invoked and the orginal date text is overwritten with the count down time remaining/elapsed in a synchronised loop. Once this first loop has begun, the script then looks for a “countdown2” id. If it finds it then a timer is started for that counter in the same way. The search process then looks for “countdown3” etc. This initialisation process stops when the next countdown timer id cannot be found in the page. Each timer keeps synchronised to the computer's clock by calculating the offset between the current time and the time to the next whole second, this delay is then used as the wait period for the setTimeout command, thus this script should always stay true to the computer clock and you shouldn't ever see rounding errors that cause the clock to suddenly tick 2 seconds on one loop and tick no seconds on another - unless your computer is really slow!
How do I hide the seconds?
The script does not have this feature. The counting of seconds is fundamental to the way the script works internally and if seconds should not be displayed then the script internals should really be re-written to ‘tick’ every minute instead of every second. The advanced version (listed below) does not have this feature either, though it does have the ability to stop hours, minutes and seconds appearing if they have zero value.
I would like the counter to count in years too
Sorry, this is not a feature that the script currently provides.
How do I customise the script?
See the advanced version. However, if you are technically minded then feel free to modify the script source to suit your needs — it's not particularly complicated.
I need more help!
Sorry! This script, and many others on this website, are provided for free and hosted at personal cost — 1-to-1 technical support is not available. Occasionally I respond to such questions on the feedback page (select the “Comments” button in the form), although that page is not designed for such purposes. If you feel that something is missing from the documentation provided then please leave a note on the aforementioned feedback page.
I have a feature request
Use the comments button as described above, but check to see that it has not already been requested! All feedback is read, though you may not receive a reply. You may also have noticed that I have a contact page where you can send me messages via a form, but please do not use it for anything script-related or anything to do with technical support.
I have an older version of the script but can't get it to work
Version 1.41 and below of the countdown script is incompatible with the above documentation — simply download the latest version of the script and try again!
Would you make me a custom version?
Sorry, I'm much too busy most of the time for anything like that!
Can I pause the countdown?
Sorry, this is not a feature that the script currently provides.
If the page is refreshed / reloaded does the countdown start over again / restart?
No. In such cases the script continues counting down (or up) correctly and isn't interrupted.
Does the script work with XHTML pages?

Short answer: Yes and no, and it's not about what DocType you use.

If you serve the page with an XML prologue (<?xml version="1.0" encoding="UTF-8"?>) or a proper XML or XHTML mime-type then the script will likely not function in all browsers. This is because the script makes use of the non-standard, but well-supported, “innerHTML” method. This makes for faster rendering, but this method isn't available in true XML documents in some browsers.

However, the chance of this happening is very small because most XHTML pages on the web today actually aren't interpretted by browsers as XML. This is because whilst those pages may look like XHTML they are served without an XML prologue and with the wrong mime-type (e.g. “text/html”). Due to this, most browsers treat XHTML pages as a form of HTML. When this happens, as it usually does, the “innerHTML” method is still available and the counter works as normal.

If you fall foul of this problem, then the current workaround is to serve the page containing the counter as “text/html” and then remove the XML prologue — the DocType can usually be left as it was. A true XML-XHTML compatible version of the script may be made in the future, but will be somewhat larger in size than the current one.

How do I use the countdown if I have a MySpace / Blogger or similar account?

Since I'm not familiar with such services here's a best guess. This advice applies to any situation where you can't upload javascript files to your web server.

15-second guide:
Copy the 4 lines of HTML below into a text editor of some sort. Download the countdown script and open it in a text editor. Copy the entire script contents and paste it on the blank line of the HTML (line 2) in the other text editor window. Now copy the whole lot into your Blogger (etc) website template. Save it and follow the normal instructions above for adding your countdown date HTML.

2-minute guide:
Download the script to your machine in the normal way as described in the instructions towards the top of this page. Locate the file you just downloaded and open it in a text editor — if you're using Microsoft Windows then the built-in Notepad text editor is all you need.

OK, now open your website template in whatever program you use to edit it, I'll assume you just use a web browser for this. So now you have your text editor window with the countdown script in it and your web browser window with your website/blog template in it. In the web browser window find a convenient place to write the following HTML into it (it probably does not matter whereabouts you do this):

<script type="text/javascript" defer="defer">//<![CDATA[

//]]>
</script>

Now go to the text editor window, highlight (select) all of the text in the page. Copy all of this selected text.

Go back to your web browser window with your website/blog template in it. Position the cursor on the blank line between the two “script” elements you entered earlier and paste in everything you copied from the text editor window a moment ago.

Now follow the normal instructions above for adding your countdown date HTML to your website template. Then, simply save/upload your website/blog template and then browse to your webpage/blog in the usual way.

Terms of Use

See the general note on terms of use (be they commercial, educational, governmental, etc) for any of the scripts that can be found in this section: Copyleft, not Copyright.

Advanced Version

A feature-rich version of this script is also available — yes, it's still free. In the advanced version the text displayed is highly customisable — is multi-lingual, can do various things when the timer reaches zero, etc. You can also compensate for the end-users machine having the wrong date and time set! Yet, the script is still fairly easy to use, still doesn't need you to know any javascript and remains accessible to those browsing without javascript turned on. You can find it here: DHTML Easy Countdown Pro.

Advertisement

Feedback

Voting Panel
Could this basic version be improved? (if so please say how)
or
Did you find any bugs?
or
Rate this script: (0 = poor, 5 = very good)
Answers are anonymous, only the combined totals are stored. Uses cookies.