|
JavaScript Tip:
Generate Excitement With A Countdown
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Web site visitors like to quickly jump from one Web site to the next looking for information and entertainment. But there's so much to choose from on the Web that visitors who leave your site may never return. Encourage visitors to sign up for special offers or make reservations for events by using a countdown script. The script generates a sense of urgency that helps persuade visitors to take immediate advantage of your appeal.
Understand The Date Object
Before you start on the script, make sure you understand how JavaScript handles the Date object. Date is a built-in JavaScript object you can use to work with dates and time. You can create a new Date object any time you need to store a date and use it in calculations.
There are several important things to remember about the Date object:
- Date objects have no properties!
- Dates are stored as the number of milliseconds since midnight, January 1, 1970. So when you need to display a calendar date using a Date object, you will usually need to convert it from milliseconds to a different format.
- Create a Date object by declaring a variable using the New keyword.
|
Now, you're ready to create a simple countdown function.
Basic Countdown Script
The basic script is actually very easy, but it can have a big impact on your visitors' behavior:
Define the variables that you're going to use in the function:
- now: today's date. Whenever a visitor views your page, the script will fetch the current calendar date and assign it to the variable "now."
- eventDate: The date of the event you're counting down toward.
- msEachDay: Calculates the number of milliseconds each day. You'll use this variable to perform the math calculations on the new Date objects.
|
Here's what the formula is doing:
hours/day * minutes/hour * seconds/minute * milliseconds/second
Next, write your function "daysUntilEvent"
- Step 1: Subtract the current date from the event date. The getTime object returns the date in milliseconds, so divide the result by the msEachDay variable to get the number of days remaining.
- Step 2: Perform an additional calculation on daysRemaining using the Math.round method to round the result to the nearest integer. This extra step keeps your function from returning a value like: "Only 16.888883 days left to enter!"
- Step 3: Use the document.write statement to display the results with the appropriate comments.
|
Now it's time to include the results of the function "daysUntilEvent" in the body of your page by calling the function wherever you'd like the statement included:
<BODY>
<DIV align="center">
<B>
<SCRIPT LANGUAGE="JAVASCRIPT">daysUntilEvent()</SCRIPT>
</B>
</DIV>
</BODY> |
You can insert this statement inside a table cell, a paragraph, etc. and format it however you like. It's also possible to include the HTML formatting information inside the actual document.write statement, but that can get confusing if the format is complex. You get the same effect by including it outside the SCRIPT opening and closing tags.
Generate Excitement
You often see this type of counter used on political Web sites during the election season. They lend a sense of urgency by showing just how quickly Election Day is approaching. For instance, the following statement uses our example code to count down the number of days until the next Congressional election in the United States:
Only days until the 2002 election!
Of course, the script is appropriate for just about anyone's Web site. Commercial sites could alert visitors: "Free Shipping offer ends in 3 days!" A motorcycle club might remind members: "Annual Harley Road Rally in 10 days. Register Now!" Or your personal site might pointedly suggest to family members: "Only 7 days until my birthday!"
A countdown is a good way to promote your site or your products to visitors, but you have to get them to your site first. NetMechanic's Search Engine Power Pack can help. Use it to optimize your site for search engines, submit it to the Top 100 engines, and track your rank.
|
