Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy Java Script Code for Date Count Down

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.

thisDate.getTime();

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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268