Dynamic Countdown Script
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.
Demos:
Separate Demo: Count Down Wall
Directions 
Step 1: Insert the below script into the HEAD section of your page:
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:
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>
<script>
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
</script>
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
}
else{
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.