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

FF1+ IE5+ Opr7+

Dynamic Countup Script

Author: Dynamic Drive

March 18th, 07': Script completely rewritten for multiple instances on the same page, plus ability to customize output via "oncountup" event handler.

Description: Display how much time has passed since an expired date with this rare script. It's sensitive to the second (ie "April 9, 2005 13:30:00"), and thanks to a custom "oncountup" event handler, you can control exactly the action to take each second as the script is counting up, most commonly, display the results inside a DIV.

Lets use it below to show how long "Prince Charles" has been married to Camilla Parker for:

Demo:  


Directions Developer's View

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

Select All

Step 2: Then, add the below sample count up code to the BODY of your page to see how to initialize the script:

Select All

The code of Step 2 shows you how to create a count up. First, call the dcount() function:

//SYNTAX: myvariable=new dcountup(past_date_and_time_string, "baseunit")
var princewedding=new dcountup("April 9, 2005 13:30:00", "days")

It accepts the following two parameters:

  • past_date_and_time_string: A string containing the complete count up date and time using the format: "April 9, 2005 13:30:00". As you can see, the time is in military (24 hour) format.

  • baseunit (string): The top level unit to count up 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, instead of starting at days.

Once you've called dcountup(), the script begins counting up, though no results are shown. It's up to you to tell the script exactly what to do as each second passes, using the "oncountup" event handler of the script instance:

princewedding.oncountup=function(result){
  //Define action to take as script counts up each second
  //Available properties: result["days"], result["hours"], result["minutes"], and result["seconds"]
}

Whatever code you define inside this event handler will be run every second as the script ticks away!

The lone parameter "result" gives you access to the days, hours, minutes, and seconds that together add up to the amount of time that has passed. Each component is accessed via:

  • result["days"]
  • result["hours"]
  • result["minutes"] and
  • result["seconds"]

inside your custom function, respectively. So with that said, here's how you might display the results of a countup in an arbitrary DIV on the page:

<div id="cpcontainer">&nbsp;</div>

<script type="text/javascript">

princewedding.oncountup=function(result){
  var mycountainer=document.getElementById("cpcontainer")
  mycountainer.innerHTML="Prince Charles and Camilla Parker have been married for:"+ result['days']+" days "+result['hours']+" hours "+result['minutes']+" minutes "+result['seconds']+" seconds"
}

</script>

It's up to you to customize the action to take "oncountup" based on what you wish to do and obviously your knowledge of JavaScript in general. If you take a look at the code of Step 2, you'll see I've formatted the results using tags such as <span> and <sup>.