JavaScript Countdown Function

This morning (Thursday, February 18, 2004) Bob Harris on the This Modern World blog noted, with some glee, the dwindling number of days that the current resident of the White House has left in office, assuming the liberals and Democrats (not necessarily the same people) get their way. He noted that a savvy Javascript coder could come up with a code snippet that could be inserted on a page, counting down the days. As I write this, he had gotten over 60 responses so far.

Well, since I was already about done by the time I saw that update, I figured I'd go ahead and post mine too. There will be much spiffier ones, but I think mine has some advantage in terms of brevity, simplicity, and re-usability. It does not use any graphics, but does enable CSS styles to be easily applied. The disadvantages are it calculates only days, and (as used here) does not update itself continously. (Since it only shows days, this is only a problem if you keep the page open over midnight.)

Here it the code which prints the the text below it, in its entirety (except for the CSS style definitions):

<div id="countdown">
<script type="text/javascript" lanugage="JavaScript">
   function countDownDays( sUntilDate ) {
      // Date.parse and .getTime return milliseconds since 1/1/1970
      // Math.floor returns the integer portion of the number
      var MS_PER_DAY = 1000 * 60 * 60 * 24;
      var iUntilDays = Math.floor( Date.parse( sUntilDate ) / MS_PER_DAY );
      var iNowDays = Math.floor( (new Date()).getTime() / MS_PER_DAY );
      return iUntilDays - iNowDays;
   }
   document.write( "<p>Day of year (2004): <span>"
                 + countDownDays("01 Jan 2004")
                 + "</span></p>"
                 );
   document.write( "<p>Days until today: <span>"
                 + countDownDays(new Date())
                 + "</span></p>"
                 );
   document.write( "<p>Days until my birthday (March 16) in 2004: <span>"
                 + countDownDays("16 Mar 2004")
                 + "</span></p>"
                 );
   document.write( "<p>Days since I was born (1966): <span>"
                 + countDownDays("16 Mar 1966")
                 + "</span></p>"
                 );
   document.write( "<p>Days George Bush has left in office (some of us hope): <span>"
                 + countDownDays("20 Jan 2005")
                 + "</span></p>"
                 );
</script>
</div>

Comments

To use it in your own page, just copy and paste the code in the box to your page, replacing my series of "document.write" statements with your own. (You can have as many or as few as you want.) You probably also want to define your own CSS styles in your header (see next item). If you are a purist, you can also move the function definition to its own <script> tag in the header, or into an external file, to make it even more re-usable. But that is entirely optional.
The <div> is provided for the CSS styling. If you look at the source to this page, you'll see that the style is defined for P and SPAN tags within a DIV named "countdown". There are other ways to define styles, but I won't go into that here. If you would rather define them another way, you probably already know how. If you want to change the definitions I'm using but don't know how, google for a tutuorial or reference on "Cascading Style Sheets", or ask someone.
The countDownDays function is very re-usable, just pass it a date in the form "dd mmm yyyy", and it returns the number of days. Here, we use the result in a JavaScript document.write function, which makes it static on the page. It could just as easily be used in a dynamic counter that updates itself once a second, as others which Bob received do. Of course, then the function would have to calculate and return more than one value, so it would have to return it through parameters rather than a single return value, complicating the whole interface. That's partially why I'm keeping it simple.
You may notice there's zero error checking. So if you pass something other than a "dd mmm yyyy" date string, results are undefined. Assuming the input date in written right in your page source, this is the only error you should have to worry about.
I don't know why the 1966 example works, since the JavaScript Date object supposedly only represents dates from 1/1/1970, but there it is. Maybe it correctly represents them as negative numbers, in which case the math still works.