Script Tip 85

by Joe Burns, Ph.D.

 

Tips...

     Last week we learned the NAMEs attached to each of the HTML image tags. Today we begin playing around with replacing those image tags with the correct numbers, depending on what time it is.



Here's the Code


     The time is grabbed from the user's browser, so there's no need to worry about daylight savings time or time zones. As long as the viewer has his or her browser set correctly, you're good to go. If they don't, well, you can't help that.

     Let's start at the top of the script just below the loading loop and code:

function clock() {
dates=new Date();
hour=dates.getHours();
min=dates.getMinutes();
sec=dates.getSeconds();
if(hour < 12) {
amPM=am.src;
}
if(hour > 11) {
amPM=pm.src;
hour=hour-12;
}
if(hour == 0) {
hour=12;
}
if(hour < 10) {
document["tensHour"].src="dgtbl.gif";
document["Hour"].src=d[hour].src;
}
if(hour > 9) {
document["tensHour"].src=d[1].src;
document["Hour"].src=d[hour-10].src;
}
if(min < 10) {
document["tensMin"].src=d[0].src;
}
if(min > 9) {
document["tensMin"].src=d[parseInt(min/10,10)].src;
}
document["Min"].src=d[min%10].src;
if(sec < 10) {
document["tensSec"].src=d[0].src;
}
if(sec > 9) {
document["tensSec"].src=d[parseInt(sec/10,10)].src;
}
document["Sec"].src=d[sec%10].src;
document["amPM"].src=amPM;
setTimeout("clock();",100);
}

     Don't get put off by its size. It's basically the same thing again and again once we get to the numbers.

     Now...from the top!

     The function is named clock(). You may have noticed it is called for by an onLoad Event Handler in the BODY tag. If you didn't notice...it is.

     First we get to some basic clock-building JavaScript:

dates=new Date();
hour=dates.getHours();
min=dates.getMinutes();
sec=dates.getSeconds();

     The variable "dates" is given the value new Date(). Date() is a JavaScript method that contains all of the elements of the current date and time. Here's where I'll prove that. This is the Date() method set inside a document.write(Date()) command:

     See all of the separate elements? Now we need to use some more code to simply suck out the parts we want. In this case we want the hour (getHours()), the Minutes (getMinutes()), and the seconds (getSeconds())

     The three items are assigned the variable names "hour", "min", and "sec" respectively.

     Now that we have the elements, let's test them.

if(hour < 12) {
amPM=am.src;
}
if(hour > 11) {
amPM=pm.src;
hour=hour-12;
}
if(hour == 0) {
hour=12;
}

     We'll start with the hour. If it's less than 12, the image tag denoted "amPM" will receive the am.src. If you remember the preload commands, that would be "dgta.gif".

     If the hour is greater than eleven, you put the pm.src (dgtp.gif) into the tag "amPM", plus you take the number represented by hour and lose 12. That's because JavaScript goes in military time. If the time is 20, take away 12, and you get 8PM. Get it?

     Finally, what if the hour is equal to zero (midnight)? The code says to make "hour" 12. Now that that's all fixed, let's place the hour.

if(hour < 10) {
document["tensHour"].src="dgtbl.gif";
document["Hour"].src=d[hour].src;
}
if(hour > 9) {
document["tensHour"].src=d[1].src;
document["Hour"].src=d[hour-10].src;
}

     We're worried about two numbers here. If the hour is 10 or better, we need to place a one in the first image and then whatever the hour is in the next. If the hour is 9 or below, we need a blank in the first digit space and whatever the number is below.

TechCrawler
Want more information about Javascript clocks?
Search the Web.

     It works through a series of "if" statements. We start by asking if the hour is less than 10. If so, then the "tenHour" image tag gets the "dgtbl.gif". That's the blank image. The second image, "Hour", gets the digit equal to the hour (1 through 9). It's done by using the [square brackets] and allowing the variable inside the square brackets to be replaced by the variable value. Make sense?

     If the hour is greater than ten, then the first image "tensHour" gets the number one image and the second number is created by the hour minute ten. Remember that the hour return is in military time, but above we took 12 away from any number greater than 12. If the return is 2300 hours, above we took away 12, that takes it to 11, then here we took away ten, that leaves one. One is then used to post the image. Ta da!

     The minutes and seconds are also done through some fancy mathematical fun. We'll get to that next week.

Next Week: Minutes and Seconds

     Do YOU have a Script Tip you'd like to share? How about suggesting a Script Tip to write about? I'd love to hear it. Write me at: jburns@htmlgoodies.com.


Learn to write your own JavaScripts with the HTML Goodies 30-Step Primer Series