How to build a countdown clock for a web page

Written by craig witt
  • Share
  • Tweet
  • Share
  • Email

Web page authors often want to count down the days, hours or minutes until a given event, such as the end of an auction, opening day of a sports season or a person's birthday. Creating a countdown clock like this is most simply accomplished by using JavaScript programs that helpful web developers have released for public use, free of charge. Implementing the clock requires a small degree of technical experience, namely the ability to interpret the tags and general structure of an HTML document.

Skill level:
Moderate

Other People Are Reading

Instructions

  1. 1

    Locate a countdown clock script you can freely use. Many different free countdown clocks are available, each designed for specific uses. This example uses a wonderfully simple script developed by hashemian.com (see References).

  2. 2

    Open the page where the countdown clock will be placed. Start by opening a text editing program, such as Notepad or Wordpad. Select "File" from the menu at the top of the screen, then click "Open." By default, these programs only open .txt formatted files, but they can easily open any plain text file, including HTML-formatted web pages. To display these files, find the drop-down menu reading "Text Documents (*.txt)" and click it, then choose "All Files." Find your existing web page and open it.

  3. 3

    Add the countdown code to your web page. First find the location in your HTML code where you wish to show the clock numbers counting down. Then paste the following code, obtained from the free script referenced in Step 1, in this location:

    <script language="JavaScript"> TargetDate = "12/25/2011 5:00 AM"; CountActive = true; CountStepper = -1; LeadingZero = false; DisplayFormat = "%%D%% days, %%H%% hours, %%M%% minutes, %%S%% seconds."; FinishMessage = "It is finally here!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"> </script>

  4. 4

    Modify the parameters of the script to suit your needs. The listed code allows you to change the countdown date, the display of leading zeros, the text displayed after each unit of measurement and the message displayed when the countdown date is reached, among others. Update these parameters as appropriate for your web page. When finished, select "File," "Save."

  5. 5

    View your updated web page. Open the web page you just edited in your browser. If you followed directions precisely, you will notice the seconds counting down toward your selected countdown date.

Tips and warnings

  • In most cases, you may freely use scripts made available for public use, as long as you give the creator credit. Credit is typically given through a link to the creator's website from yours, or by preserving the author information present in the script's code.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.