Easy Java Script Code for Date Count Down
By Stephen Bucaro
One of the most powerful incentives for people to make a purchase is scarcity,
and one of the most popular ways to create scarcity is have a "limited time"
offer. You'll see this technique used all over the Web. "Buy within the next
8 hours and you'll get half off!". Of course we both know that "limited time"
offer will be repeated over and over, but you can never be sure.
Web pages that present a limited time offer always have a count down timer
to let you know how much time is left before you'll be required to pay regular
price. In this article, I provide easy code to create for you to create a
Java Script Date Count Down for your website.
But before I give you the code, lets take a quick look at the Java Script
Date object. If we create a Date object without parameters, it
will return the current date based on the computerís clock. Show below is code
to create a Date object and store it in a variable named "thisDate".
var thisDate = new Date();
The Date object has a method named getTime() that returns
the number of milliseconds since the the date specified by the instance of the
Date object (in this case now) and January 1, 1970.
Now if we could get the number of milliseconds since the date and time that
our limited time offer expires and January 1, 1970, we could subtract that
from the current milliseconds to determine how much time was left on our offer.
In fact we can actually do that by creating a Date object with our
expire date as a parameter.
There are several different formats you can use to pass a date to the
Date object, one format is shown below.
Date(month, day, year, hour, minutes, seconds);
I like this format because it includes the exact time down to the second,
in other words, you might want to end your limited time offer at one minute
after midnight on the morning of 09/17/2011. The code to create a Date
object that returns the number of milliseconds since January 1, 1970 and
one minute after midnight on the morning of 09/17/2011 is shown below.
var endDate = new Date('09/17/2011' + ' ' + '00:01:00AM');
Now we can easily subtract those milliseconds from the current milliseconds,
as shown below.
var diff_ms = endDate.getTime() - thisDate.getTime();
This gives us the difference in milliseconds. You can use this in your own
count down timers if you want to count down in milliseconds. You might find
it a little inaccurate though because sometimes a computer gets too busy to
update its display every millisecond.
By dividing the difference in milliseconds by the number of milliseconds in
a day (1000 * 60 * 60 * 24) We can get the difference between those two dates
in days. The code for this is shown below.
var diff_days = Math.floor(diff_ms/(1000 * 60 * 60 * 24));
This is fine if you want to display the time remaining in days, but to add
to the drama, you might want to display the time remaining in days and hours.
To do this, subtract the days (converted to milliseconds) from the total difference
in milliseconds to get the left over milliseconds. Then divide that by the
number of milliseconds in an hour. The code for this is shown below.
diff_ms -= diff_days * (1000 * 60 * 60 * 24);
var hours = Math.floor(diff_ms/(1000 * 60 * 60));
Note in the code above that we used the Math object's .floor
method which drops the decimal part of the number, this causes it to always
return the next integer less than or equal to the original value.