Free HTML Countdown

Free HTML Countdown

One of the benefits of the Internet's open nature is the easy availability of code for things like a free HTML countdown widget. One of the first examples of a dynamic web element, the countdown simply does just that: Traces the days, minutes, or seconds to some event.

Types of Free HTML Countdown Widgets

There are two basic ways to obtain a countdown widget: Use someone else's, or roll your own. Each has its own particular advantages and disadvantages. Before deciding on one, it is important that a web designer evaluate exactly what the purpose is of the countdown. Is it an actual measurement, just to be informative? Or is it designed to generate a sense of excitement at the impending row of zeros, signifying the start of…something? Knowing what you want it for will save time and make sure the free HTML countdown will be worth more than what you paid for it.

Other People's Code

The advantage to using pre-set code generators is simply that it lets other more experienced programmers do the work, and often that will include stylistic nuances that might not be available. These include things like:

  • Alternate fonts
  • Alternate background colors
  • Images instead of digits
  • Additional messages

In that last item lies one of the dangers of this method. There are plenty of helpful open-source resources which let you simply input the relative parameters about when the event is and the visual preferences, and then provide you with the code to paste into your website.

However, many of these also are not really "free" - they use your website as launching platforms for their own advertising, and some may even go so far as to embed viral code into the free HTML countdown which can be inimical to the visitors to your site.

Another very common technique is to require you to input your e-mail address as one of the parameters. There's no real reason that this is a relevant part of creating the HTML for the countdown; since it's going on your own site, it's presumed that you will already have contact information on it. The only reason the code generating page needs your em-ail address is to send you spam, or worse use your name to fool spam filters into thinking that the recipients are receiving emails from a trusted source.

Thankfully, since there are many sites to choose from, taking the time to find one that doesn't seem so predatory can be a relatively easy task.

Roll Your Own

Building your own is only slightly different than using the kind of easy formatting that the free HTML countdown websites offer. However, because you'll be editing the code The following is a template for just such a countdown - very few frills, and it is mainly explained line by line (only the "HTML" coded sections should actually be used; the comments are for explanation only). The script, once the variables are set, should be put within the < body > section of your page, wherever you want the countdown to appear.

<script type="text/javascript">

var today=new Date()

This section is to select the date for your countdown - that is, when the event is going to occur. The example has the second month, fifteenth day selected.

var countdown=new Date(today.getFullYear(), 5, 15)

The countdown may or may not need explanation, again depending on the purpose of the countdown.

var beforedayText="left until Gray Miller's Birthday!"

Next, there might need to be some message that announces the event when it happens:

var ondaytext="Today is the day. He doesn't look any older!"

The next section of code is the nuts and bolts of the counter, and should only be changed by someone with a thorough understanding of HTML and javascript:

var monthtext=new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec")

countdown.setMonth(countdown.getMonth()-1) month format

var showdate="("+monthtext[countdown.getMonth()]+"

"+countdown.getDate()+")"

var one_day=1000*60*60*24

var calculatediff=""

calculatediff=Math.ceil((countdown.getTime()-today.getTime())/(one_day))

if (calculatediff<0) {

var nextyeartoday=new Date() nextyeartoday.setFullYear(today.getFullYear()+1)

calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff)

}

var pluraldayornot=(calculatediff==1)? "day" : "days" if

(calculatediff>0)

At the end of the calculations, the javascript has a document write function that actually displays the changing countdown every day on your website:

document.write("<b>"+calculatediff+" "+pluraldayornot+" "+beforedayText+" "+showdate+"!</b>")

else if (calculatediff==0)

document.write("<b>"+ondaytext+" "+showdate+"!</b>")

--> </script>

With this code integrated into your site, your countdown will automatically let people know how long before the great event, with no further updates needed by you! It should be noted, however, that once the event happens, this particular countdown will start over - great for birthdays, but like any part of the web, it takes constant vigilance to keep your site current and relevant.

Free HTML Countdown