New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Dynamic Countdown Script

Author: Dynamic Drive

Updated: April 24th, 06'. Script completely rewritten.

Description: There are basically two types of JavaScript countdown scripts, depending on what you're trying to do. The first type counts down using the time of the visitor's computer, which obviously varies depending on the visitor, and is great for counting down to "relative" events such as Christmas, your friend's birthday etc. The second type counts down using a specific local time (ie: Time in New York), and is great for counting down to "absolute" events where the target date/time is tied to a certain time zone, such as the launch date of a web site, the date/time of the next Solar Eclipse etc (See "Universal Countdown script").

Dynamic Countdown script belongs to the first type of count down script that lets you count down to relative events of a future date/time. This future date, while the same for everyone, occurs differently depending on the time zone they're in (ie: Christmas, your mom's birthday, April 1st 2015 etc). This script is extremely flexible- you can customize exactly how to display the output, or even specify a custom action to perform at the end of the countdown (ie: go to another page), by passing in your own custom format function.

Demos:



Directions Developer's View

Step 1: Insert the below script into the HEAD section of your page:

Select All

Step 2: Insert the below example script into the BDOY section of your page where you wish the countdown to be shown:

Select All

The code of Step 2 shows how to invoke the script to display a countdown on your page, by calling the function cdtime():

new cdtime("ID_of_DIV_container", "target_date")
  1. ID_of_DIV_container (string): The ID of the DIV or span that will display the count down.
  2. target_date (string): A string containing the complete target date and time to count down to, using the format: "March 23, 2009 18:25:00". As you can see, the time is in military (24 hour) format.

But wait, to actually display the count down, you must then follow up by calling cdtime().displaycountdown(). Here's an explanation of this method:

cdtime.displaycountdown("base_unit", formatfunction_reference)
  1. base_unit (string): The top level unit to count down using. Valid values are "days", "hours", "minutes", or "seconds." If you enter "hours", for example, the script will count the number of hours, minutes, and seconds left until the event (versus days...).
  2. formatfunction_reference (string): The name of your custom function (minus the for formatting the display of the count down. This allows you to basically format the display in any way you wish, or even create custom actions to perform, such as "Go to a certain page" when the count down is completed. Read the below FAQ for more info on this.

Q) How do I customize the output or even behaviour of the countdown?

Answer: The script lets you pass in your own format function as the second parameter of cdtime.displaycountdown(). This enables you great flexibility as far as how to customize the script output. Inside the code of Step 1 above, we've included two sample format functions. Lets take a look at the 2nd one, which displays the nice LCD countdown you see in demo #2:

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc


function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> left until this Christmas"
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("Christmas is here!") //Instead, perform a custom alert
}
return displaystring
}

Function formatresults2() is our custom format function here. Inside this function, you're free to use the keywords "arguments[0]", "arguments[1]" etc any way you like to output the days, hours, minutes, and seconds left until the countdown is completed. Then, specify the text to display or action to perform at the point the countdown is done. Here, we're telling the script to display nothing, but instead, alert the message "Christmas is here!".

Obviously to be able to take full advantage of this script, you'll need to be familiar with some JavaScript.