HTML Goodies: Script Tip: Week 86

 

Tips…

     We’re in the home stretch. We’ve grabbed the time, set the returns into numbers we can play with and used those numbers to post the AM/PM image and the two hour images. Now we’ll set the minutes and seconds.

---

---

Here’s the Code

---

     Here’s the code we’re interested in:

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);

     The script plays with the minutes and seconds in the same way it did the hours, through “if” statements.

     If the minute return is less than “tensMIN” (the first minute image), it is set to d0.src. If you look back up the script, you’ll see that is the dgt0.gif.

     If the minute is more than nine, then we need to get the correct 10 number in the “tensMin” position. We already know that the minute return is 10 or above so we need either 1, 2, 3, 4, or 5. The little math equation parseInt(min/10,10) does the trick.

     ParseInt is a JavaScript function that turns a text string into an integer and returns that integer. Let’s say that the minute return is 43. If you divide 43 by 10, you get 4.3. The second number allows you to set the base of the integer returned. In this case, ten is the base. That gets rid of the “point whatever” extension. The number returned is 4. Success.

     Now that we have the first minute image, we need the second. That is done, again, by a quick mathematic equation. Tha value assigned to “Min” is arrived at by taking the minute return and dividing it by ten and returning the remainder. That’s what the percentage sign does.

     For example, the minute return is is 36. If you divide that by ten, you get 3.6. The remainder is six, six is returned. Success…again.

     The seconds are done exactly the same way following the same math using the seconds return.

     Finally the “amPM” flag is given the value represented by the variable “amPM” from above. Remember that? We set it almost first in the script.

     OK, we’ve posted all of the images. The problem is that the second changes, well, every second. We need get this script to run again and again to repost again and again. The effect is a running digital clock.

     The “setTimeout()” method does that. It’s set to run the function clock() every 100/1000^ths of a second. That should do it.

     Next time around we’ll stay with a digital clock, except we’ll create a clock that will tell you the time in any one of the time zones anywhere in the world. It’s a big, involved script that allows for daylight savings time and leap years. You’ll like it.

     See you next time.

Next Week: Time Zone Clock

---

Learn to write your own JavaScripts with the