FF1+ IE8+ Opera

Dynamic Countdown Script

Author: Dynamic Drive

Updated: November 24th, 16'. 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.


Separate Demo: Count Down Wall

Directions Developer's View

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

Select All

The code references an external JavaScript file, which you should download below:

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

Select All

Read on for more details on setting up the script.

Step by Step Setup Guide

To set up a count down, first, define a DIV or SPAN that will display the result, then call new cdtime() following the markup:

<div id="countdowncontainer"></div>

var countdowncontainer = document.getElementById('countdowncontainer') // reference container 
var futuredate = new cdtime("March 23, 2018 18:25:00")
futuredate.oncountdown = function(ms){ // define call back function, called every second until time's up
 // ms contains the number of milliseconds remaining
 // custom code to run every second the counter is ticking down
futuredate.start() // start count down

In the above case, we define a DIV with id="countdowncontainer" to count down to March 23, 2018 18:25:00, then create a reference to it by way of variable "countdowncontainer" to come back to later.

Here comes the crucial part- following the markup, we invoke a new instance of cdtime() (with the keyword new proceeding it) to create a count down to the desired date and time:

var futuredate = new cdtime("March 23, 2018 18:25:00")

where futuredate should be an arbitrary but unique variable to reference this count down instance. Inside cdtime(), populate it with the following parameter:

Target Date Time String: The target date and time to count down to in the form of a valid JavaScript Date String, such as "March 23, 2018 18:25:00"

Once the target date/time has been entered, the remaining two steps are to define our own oncountdown function to handle the data that contains how much time remains, and finally, to call futuredate.start() to jump start the count down:

futuredate.oncountdown = function(ms){// custom code to handle time remaining, updated every sec}
futuredate.start() // start count down

We'd be amiss to not explain oncountdown in more detail, so lets focus on that next.

Defining Your oncountdown event handler to customize the output of the countdown

The oncountdown event handler, once a new instance of cdtime() has been instantiated, gets called every second until the target date has been reached, and is where you define how to handle and display the count down. Expanding on the instructions above, here is a sample oncountdown event handler that displays the output inside the "countdowncontainer" DIV in terms of "days", "hours", "minutes", and "seconds" remaining:

futuredate.oncountdown = function(ms){
	if (ms <= 0){ // if time's up
		countdowncontainer.innerHTML = "Future Date is Here!" // do something
		var timeleft = cdtime.formatDuration(ms, "days") // format time using formatDuration(timeleftms, "baseunit") function
		countdowncontainer.innerHTML = timeleft.days + ' Days ' + timeleft.hours + ' Hours ' + timeleft.minutes + ' Minutes ' + timeleft.seconds + ' Seconds '

The ms parameter always contains the time remaining in milliseconds until the target date. Inside your function, you can check for when ms is below 0 to know when the date has been reached, and act appropriately (such as navigate to a URL).

Formatting the Time left using cdtime.formatDuration()

Until the ms value reaches 0 or less, we should parse the value into the desired format, and display the output to the user. One such way is to use the built-in function:

cdtime.formatDuration(ms, "days")

It accepts two parameters, 1) the time remaining, 2) plus the desired base unit,  and returns an object containing the time left in that unit and down to the "seconds" unit. For the desired base unit, enter one of the following strings: "days", "hours", minutes", or "seconds".

Lets say we wish to display the time remaining in terms of hours and downwards. Enter "hours" for cdtime.formatDuration() second parameter:

var timeleft = cdtime.formatDuration(ms, "hours")

The function returns the following object:

	days: "n/a"
	hours: 4,
	minutes: 45,
	seconds: 10

The "days" field will contain "n/a" in this case, as it's not being used. The other fields now contain the time left starting with the specified base unit and down to the seconds remaining, cumulatively adding up to the total time left until the target date. With this returned object you can then proceed to easily display the remaining time by referencing each field in your custom code that follows:

countdowncontainer.innerHTML = timeleft.hours + ' Hours ' + timeleft.minutes + ' Minutes ' + timeleft.seconds + ' Seconds '

The above demonstrates the simplest way to output the result, as simply a string of text containing the hours, minutes, and finally, seconds left until the target date. Here's a much more elaborate demo.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post