Countdown Timer - Installation

Image-based Countdown Instructions

  1. Create 10 images, one for each digit from 0 to 9. All images must be the same width and height.

  2. Code your page as you would like it to appear with placeholder images where the digits of the countdown should appear. Use one of the digit images as the placeholder image - the zero is a good choice. You can use between 1 and 4 digits to display the number of days. Make sure there are enough digits to accurately show the number of days between now and the day you are counting down to.

  3. Add a name attribute to all the countdown digits. The name value for all the digits should start with the same letters like "myCountdown" - this is the name that will identify this countdown timer. This is followed by a "_" and then a "d", "h", "m", "s", or "ms" to indicate whether the digit is part of the days, hours, minutes, seconds, or milliseconds portion of the countdown respectively. Finally, add a number to indicate what "place" the digit represents. The hours, minutes, and seconds portions all have two places - the first place is the tens digit while the second is the ones digit. The milliseconds can have up to 3 places - hundreds, tens, and ones. The days can have up to 4 digits - thousands, hundreds, tens, and ones. Use "1000" to indicate a thousands digit, a "100" for a hundreds digit, a "10" for a tens digit, and a "1" for a ones digit. So the first digit of the hours portion would have a name value of "myCountdown_h10" (assuming the name of the whole countdown is "myCountdown"). Any of these digits can be left out if you like. See the example for more help.

  4. After the last digit, add the following code:

    
    <script type="text/javascript" src="countdown.js">
    <script type="text/javascript">
    //<![CDATA[
    var myCountdown = new Countdown('myCountdown', 43);
    myCountdown.setImages('0.gif', '1.gif', '2.gif', '3.gif', '4.gif', '5.gif', '6.gif', '7.gif', '8.gif', '9.gif');
    myCountdown.setEndDate(2008, 4, 1, 9, 1, 0, 0);
    myCountdown.start();
    //]]>
    </script>
                      

    If the countdown.js file is in a different directory than the html document, be sure to include the relative path to the Javascript file in the src attribute value of the first <script> tag.

  5. In the first line in the second script, you are telling the script what name you are giving to your countdown and how often it will update in milliseconds. The word after the var and the first word in quotes in the parentheses should be the same and should be the same as the name you used in step 3. Use this same word to start lines two to four (the bit before the period in each line). The number after the comma in the parentheses is the update frequency in milliseconds. Avoid numbers smaller than about 30 so that the countdown doesn't slow your visitor's computer down. If you leave this number out (and leave the comma out too), the countdown will update once a second.

  6. In the second line in the second script, change the image names to point at those that you created (remember to use the correct path to the image if it isn't in the same directory as the page). The order of the image names should be the same as that suggested here - 0 to 9 sequentially. Also, all image names must be quoted and separated by commas as they appear here.

  7. The date that you what to count down to goes between the paratheses in the third line of the second script. Type the number of the year, the month, and the day separated by commas. You may also add an hour, minute, second, and millisecond to this date but they are optional. In the above example, the date and time being counted down to is 9:01 on April, 1, 2008. Since the last two digits were 0, they could have been left out.

  8. The last line in the script starts the countdown.

  9. Have a nice day.

Text-based Countdown Instructions

  1. Code your page as you would like it to appear with placeholder text where the digits of the countdown should appear. Where the number of days will go, put "~d~". Where the number of hours will go, put "~h~". Where the number of minutes will go, put "~m~". Where the number of seconds will go, put "~s~". Where the number of milliseconds will go, put "~ms~". Any of these digits can be left out if you like. Put the whole countdown in a <span>. The id of the <span> will be the name of the countdown. So, if you want to call the countdown "myCountdown", the tag would be <span id="myCountdown">. See the example for more help.

  2. After the last digit, add the following code:

    
    <script type="text/javascript" src="countdown.js">
    <script type="text/javascript">
    //<![CDATA[
    var myCountdown = new Countdown('myCountdown', 43);
    myCountdown.setEndDate(2008, 4, 1, 9, 1, 0, 0);
    myCountdown.start();
    //]]>
    </script>
                      

    If the countdown.js file is in a different directory than the html document, be sure to include the relative path to the Javascript file in the src attribute value of the first <script> tag.

  3. In the first line in the second script, you are telling the script what name you are giving to your countdown and how often it will update in milliseconds. The word after the var and the first word in quotes in the parentheses should be the same and should be the same as the name you used in step 1. Use this same word to start lines two and three (the bit before the period in each line). The number after the comma in the parentheses is the update frequency in milliseconds. Avoid numbers smaller than about 50 so that the countdown doesn't slow your visitor's computer down. If you leave this number out (and leave the comma out too), the countdown will update once a second.

  4. The date that you what to count down to goes between the paratheses in the second line of the second script. Type the number of the year, the month, and the day separated by commas. You may also add an hour, minute, second, and millisecond to this date but they are optional. In the above example, the date and time being counted down to is 9:01 on April, 1, 2008. Since the last two digits were 0, they could have been left out.

  5. The last line in the script starts the countdown.

  6. Have a nice day.

Countdown to a Global Event

The script, as it is written, counts down to a specific date and time measured by the user's local time. For instance, if you specify 12:00am April 1, 2010 as the date to countdown to, the countdown will reach 0 when the user's local time is 12:00am April 1, 2010. Which means this 0 time will occur at different times for different users depending on where they are in the world. If you want everyones countdown timers to reach 0 all at the same time, you need to do two things:

  1. Specify the end date and time with respect to Greenwich Mean Time. This means subtracting the timezone offset from Greenwich from your end time. So if you are counting down to an event that is going to happen in New York, subtract New York's timezone offset (which is -5) by adding 5 hours to the end time.

  2. Using a text editor, open the countdown.js file and find the following line:

    
    this.endDate = new Date(year, month - 1, day, ( (hour) ? hour : 0), ( (minute) ? minute : 0), ( (second) ? second : 0), ( (milliseconds) ? milliseconds : 0));
                      

    Change this line to the following:

    
    this.endDate = new Date(Date.UTC(year, month - 1, day, ( (hour) ? hour : 0), ( (minute) ? minute : 0), ( (second) ? second : 0), ( (milliseconds) ? milliseconds : 0)));
                      
  3. Have a nice day.

More about this script

Licensing

This script is released under a Creative Commons License.