Sooner or later, you’ll want to put a countdown on your pages that tells the user how many days or hours until a particular event. Script 12.8 (HTML) and Script 12.9 (JavaScript) lets one of the authors know his responsibilities, in no uncertain terms, as you can see in Figure 12.6.
To create a countdown:
1. | var allTags = document.getElementsByTagName("*"); Create a new allTags array, and fill it with every tag on the page. | ||
2. | for (var i=0;i<allTags.length; i++) { if (allTags[i].className.indexOf("daysTill") > -1) { allTags[i].innerHTML = showTheDaysTill(allTags[i].id); } This loop scans through allTags to see if the string daysTill is found in the class attribute of any tags on the page. Remember that a tag could have multiple class attributes (i.e., class="firstClass daysTill somethingElse fourthThing"). If we found daysTill, we call the showTheDaysTill() function, which is passed one parameter: that tag’s id (which stores what date to put up on the page). That function returns a value that is then put into innerHTML. Script 12.8. The HTML for the countdown script.
Script 12.9. This script counts down the number of days Tom stays out of the doghouse.
| ||
3. | switch(thisDate) { case "anniv": theDays = daysTill(5,6); break; case "bday": theDays = daysTill(8,7); break; case "xmas": theDays = daysTill(12,25); break; default: If you don’t remember the switch/case multi-level conditionals, you can review the discussion in Chapter 3. Here, we are using the value of thisDate to test against the three case statements. For the anniv case, we’re setting theDays to May 6 (5,6 is the numerical representation, much like you would write it in the real world); for bday, we’re setting it to August 7; and for xmas, theDays gets set to December 25. | ||
4. | return theDays + " "; The showTheDays() function ends by returning the number of days followed by a space. This is to work around a problem in IE: it eats the spaces in the HTML. If the script doesn’t return a space at the end, the number runs into the word “days”. If you just stuck the word “days” into this function, then there’d need to be a space after that, and so on. | ||
5. | function daysTill(mm,dd) { var now = new Date(); var inDate = new Date (now.getFullYear(),mm-1,dd); This step shows the daysTill() function, which receives the dates from the case statements in step 3. Then, we create the now and inDate variables. The latter variable is filled with the current year, but with the month (with 1 subtracted from it to get it right; see the “More Weird Time Stuff” sidebar) and the day that were passed in. | ||
6. | |||
7. | return (Math.ceil(dayToDays(inDate) - dayToDays(now))); Here, we’re calculating the number of days between inDate and the current date. The Math.ceil() method makes sure that our result is a whole number. | ||
8. | function dayToDays(inTime) { return (inTime.getTime() / (1000 * 60 * 60 * 24)); JavaScript stores dates in milliseconds since January 1, 1970. In order to compare two dates, change this to be the number of days since January 1, 1970. First, get the number of milliseconds in a day by multiplying 1000 (the number of milliseconds in a second) by 60 (number of seconds in a minute), by 60 again (number of minutes in an hour), and then by 24 (number of hours in a day). Dividing the number of milliseconds returned by getTime() by this number gives the number of days since January 1, 1970. |
18.118.148.36