Dynamic Drive DHTML Scripts- Universal Countdown Script

New Revised CSS Library Forums Web Tools

Universal Countdown Script

Author: Dynamic Drive

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 (See "Dynamic Countdown script"). 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.

This is a Universal Countdown script that lets you count down to absolute events, by using your server's time to derive the local time in which the event is based on. The target date to count down to can be specific to the second if needed (ie: "April 23, 2009 2:37:30"). 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.

Requirement: The page running this script must either be PHP, SSI (server side includes), or ASP enabled, as the script needs to rely on one of these technologies to access your server's time.

Demos:

Example 1 (base unit: hours)::

Example 2 (base unit: days)::

Directions:

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

Select All
<style style="text/css"> .lcdstyle{ /*Example CSS to create LCD countdown look*/ background-color:black; color:lime; font: bold 18px MS Sans Serif; padding: 3px; } .lcdstyle sup{ /*Example CSS to create LCD countdown look*/ font-size: 80% } </style> <script type="text/javascript"> /*********************************************** * Universal Countdown script- © Dynamic Drive (http://www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ function cdLocalTime(container, servermode, offsetMinutes, targetdate, debugmode){ if (!document.getElementById || !document.getElementById(container)) return this.container=document.getElementById(container) var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s", time())?>' : (servermode=="server-ssi")? '' : '<%= Now() %>' this.localtime=this.serverdate=new Date(servertimestring) this.targetdate=new Date(targetdate) this.debugmode=(typeof debugmode!="undefined")? 1 : 0 this.timesup=false this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time this.updateTime() } cdLocalTime.prototype.updateTime=function(){ var thisobj=this this.localtime.setSeconds(this.localtime.getSeconds()+1) setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second } cdLocalTime.prototype.displaycountdown=function(baseunit, functionref){ this.baseunit=baseunit this.formatresults=functionref this.showresults() } cdLocalTime.prototype.showresults=function(){ var thisobj=this var debugstring=(this.debugmode)? "<p style=\"background-color: #FCD6D6; color: black; padding: 5px\"><big>Debug Mode on!</big><br /><b>Current Local time:</b> "+this.localtime.toLocaleString()+"<br />Verify this is the correct current local time, in other words, time zone of count down date.<br /><br /><b>Target Time:</b> "+this.targetdate.toLocaleString()+"<br />Verify this is the date/time you wish to count down to (should be a future date).</p>" : "" var timediff=(this.targetdate-this.localtime)/1000 //difference btw target date and current date, in seconds if (timediff<0){ //if time is up this.timesup=true this.container.innerHTML=debugstring+this.formatresults() return } var oneMinute=60 //minute unit in seconds var oneHour=60*60 //hour unit in seconds var oneDay=60*60*24 //day unit in seconds var dayfield=Math.floor(timediff/oneDay) var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour) var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute) var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute)) if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level hourfield=dayfield*24+hourfield dayfield="n/a" } else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level minutefield=dayfield*24*60+hourfield*60+minutefield dayfield=hourfield="n/a" } else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level var secondfield=timediff dayfield=hourfield=minutefield="n/a" } this.container.innerHTML=debugstring+this.formatresults(dayfield, hourfield, minutefield, secondfield) setTimeout(function(){thisobj.showresults()}, 1000) //update results every second } /////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW////////////////////////////// //Create your own custom format function to pass into cdLocalTime.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 cdLocalTime.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 //1) Display countdown using plain text function formatresults(){ if (this.timesup==false){//if target date/time not yet met var displaystring="<span style='background-color: #CFEAFE'>"+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds</span> left until launch time" } else{ //else if target date/time met var displaystring="Launch time!" } return displaystring } //2) Display countdown with a stylish LCD look, and display an alert on target date/time 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 launch time" } else{ //else if target date/time met var displaystring="" //Don't display any text alert("Launch time!") //Instead, perform a custom alert } return displaystring } </script>

Step 2: Inside your <BODY>, define a DIV or SPAN tag with a unique ID that will contain the local time, then invoke "cdLocalTime()" to populate it:

<div id="cdcontainer"></div>

<script type="text/javascript">
//cdLocalTime("ID_of_DIV_container", "server_mode", LocaltimeoffsetMinutes, "target_date", "opt_debug_mode")
//cdLocalTime.displaycountdown("base_unit", formatfunction_reference)

//Note: "launchdate" should be an arbitrary but unique variable for each instance of a countdown on your page:

var launchdate=new cdLocalTime("cdcontainer", "server-php", 0, "April 23, 2012 15:53:00", "debugmode")
launchdate.displaycountdown("days", formatresults2)
</script>

Here's an explanation of the 4 parameters of:

cdLocalTime("ID_of_DIV_container", "server_mode", LocaltimeoffsetMinutes, "target_date", "opt_debug_mode")

ID_of_DIV_container (string): The ID of the DIV or span that will display the count down.
server_mode (string): Valid values are either "server-php", "server-asp", or "server-ssi", to indicate this page as either of type, PHP, ASP, or SSI.
LocaltimeoffsetMinutes (integer): The offset in minutes of the local time you wish to display, from the server time. For example, if your server time is currently 9:30 AM and you know the desired local time is 11:30AM, the offset is 120, or 2 hours then.
target_date (string): A string containing the complete target date and time to count down to, using the format: "April 23, 2012 15:53:00". As you can see, the time is in military (24 hour) format.
opt_debug_mode (string): An optional parameter that helps with the debugging and initial set up of the script. Pass in "debugmode" for the script to display additional information about the current local time and target date to count down to:

Debug Mode on!
Current Local time: April 23, 2006 4:24:48 PM
Verify this is the correct current local time, in other words, time zone of count down date.

Target Time: April 23, 2012 3:53:00 PM
Verify this is the date/time you wish to count down to (should be a future date).

When this parameter is set, it will display in real time the current local time plus target time to count down to. Adjust the 3rd parameter "LocaltimeoffsetMinutes" accordingly until you get the correct local time. Once you're satisfied, disable this parameter (by removing completely the string "debugmode") from the function to hide the above message.

Ok, you're almost out of the woods. There's still a method of the function you need to be familiar with. Here's an explanation of the 2 parameters of:

cdLocalTime.displaycountdown("base_unit", formatfunction_reference)

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...).
formatfunction_reference (string): The name of your custom function 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 FAQs below for more info on this.

That's it, at least as far as general installation of the script is concerned. We've included a couple of helpful information below.

Q1) How do I calculate the "LocaltimeoffsetMinutes" value for my desired local time?

Answer: Start off by displaying the current server time on your page first, by setting "LocaltimeoffsetMinutes" to 0 and enable the last debug parameter (by entering the string "debugmode"):

With debugging mode turned on, the script will now display the current local time of your server live (since LocaltimeoffsetMinutes is set to 0). Now that you know your server time, look up the actual current local time you wish the script to be based on, then change 0 to be the offset in minutes between this local time and your current server time (ie: -120). Reload the page, and see if the local time displayed is now the correct local time, and once it is, you can turn off debugging (remove the last "debugmode" parameter).

Q2) 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 cdLocalTime.displaycountdown(). This enables you tremendous 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 cdLocalTime.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 cdLocalTime.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 launch"
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("Launch time!") //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 "Launch time!".

Obviously to be able to take full advantage of this script, you'll need to be familiar with some JavaScript. That unfortunately is beyond the scope of this script!