With just a few lines of JavaScript, you can make your Web site change every day of the year. This example adds a countdown to your page that displays how long the visitor has to wait until some special event; in this case, Christmas.
Our script starts off by creating two date objects, now and xmas. The object now is simply the date as of the moment that the script runs.
now = new Date
xmas = new Date(now.getFullYear(),11,25)
The object xmas is the date on which Christmas will occur during the current calendar year. This is set by passing three parameters to Date(): the year, the month, and the day.
As we want to use the current year, we start off by passing now.getFullYear(), the current year in four digit format. You'll next notice that it appears that we're trying to set xmas to be November 25, or the 25th day of the 11th month. However, this is one of the cases where JavaScript goes out of its way to confuse you about when a number system is zero-based versus one-based. Months are zero-based, so that the number 11 is actually the 12th month (starting with January as zero). Days are one-based, so the 25 actually is the 25th day of the month. Put it all together, and we get the 25th day of the 12th month, or December 25.
If we're between December 26 and December 31, we'll want to display the number of days until the Christmas of the following year. This code handles that case:
if (xmas.getTime() < now.getTime())
xmas.setYear(now.getFullYear()+1)
The getTime() method returns the number of milliseconds since January 1, 1970. If the value for xmas is less than the value for now, we know that Christmas has already passed us by for the year. In this case, we add one to the year by calling the setYear() method and forcing the value to be the following year's holiday.
Now that we know when xmas is, we just need to figure out how long it will be before it arrives. Again, we use the getTime()method to retrieve the date.
daysTillXmas = Math.floor((xmas.getTime() - now.getTime()) /
(1000 * 60 * 60 * 24))
By subtracting now from xmas, we get the number of milliseconds until Christmas day. We then take that number and divide it by the number of milliseconds in a day: 86,400,000. That's not the easiest number to remember nor the most obviously meaningful, so we calculate it instead by breaking it down into recognizable chunks: 1000 milliseconds in a second, 60 seconds in a minute, 60 minutes in an hour, and 24 hours in a day. Dividing the number of milliseconds by this sequence results in the number of days ahead, including a fractional part. We then strip off the decimal portion by calling Math.floor(), which returns just the integer part of the number. Finally, this result is stored in the variable daysTillXmas.
There's only one part left—actually writing this number out. This has to be done inside a body script so that the information becomes part of the actual Web page. All of the work has already been done above, though, so we can display the number of days by simply including the following, which writes out the number of days as part of the HTML body text:
document.write(daysTillXmas)
Of course, this script can be used for any date, not just for Christmas. On a business site, you can use it to display the number of days until a deadline, the number of days until a new product ships, or the number of days left on a special promotion. On a personal site, it can be the number of days until an anniversary or any other special event. No matter what you use it for, a simple JavaScript countdown can add a dynamic element to your site.
Click here for sample code.
