HTML Goodies: Script Tip: Week 25

Tip Top…

Hey, hey! We’re good to go with the running digital clock this time around. This is a big, involved piece of code that you’ll love. I do. Of course… I wrote it! Click the button to get the time.

---

---

Here’s the Code for the Clock

---

As we did with the last scriptwe tore apart, let’s start at the bottom of this one, with the HTML form flags.

---

Yes! I know, I know…

Before the barrage of e-mail telling me the use of a button to start the clock is silly and that the clock has to be started again each time the user leaves and returns to the page and the clock would be much better served starting with an onLoad command in the body, I say to you that I know all of that.

I am using the button as a teaching tool. It will allow me to talk about triggering the function and talk about how the script reacts. But, so we’re all happy…

Yes, it is a much better idea to trigger this clock when the page loads through the use of an onLoad=”RunningClock()”trigger in the BODY flag. That way every time the page is reloaded, the body flag runs and the clock starts up with no user input.

Now that I’ve said that, we shall get started.

---

The HTML Form Elements

They look like this:

<FORM NAME=”clock”>

<INPUT TYPE=”text” name=”clockface”>
<INPUT TYPE=”button” VALUE=”Get the Time” onClick=”RunningTime()”>

</FORM>

The form flags create two elements: A text box, where the output of the clock script will display, and a button that triggers the function.

The form itself is named clock. That makes sense. The text box that will contain the clock face is called clockface. Clever names, huh?

The button is basic JavaScript that carries an onClick event handler that triggers the function RunningClock().

So, now we have the info needed to apply the JavaScript to these form elements. You should be able to pick out by now that the text box above will be represented by the hierarchy statement:

document.clock.clockface.value

---

What’s Happening?

Most people tell me that when they read these Tips, the first thing they do is take the script from the page and paste it into an HTML document. Because of that I like to take the first Tip on each new script and simply explain the script’s construction.

• This script will deal with three elements: The hour, the minute, and the second.
• First, the hour is grabbed from the user’s computer and examined. If the hour is 1 through 12 noon, nothing is done and it is allowed to display. If the hour is 13 through 23, it is changed into the more familiar 1 through 12 format and displayed. Finally, we decide if it’s actually AM or PM.
• Next, the minute is grabbed. If the minute is 1 through 9, a zero is added in front and it is displayed. If not, then the return is displayed.
• The second is grabbed. Again, a zero is added to the display if the display is less than 10. Also, if the display is 60, it is changed into 00.
• Lastly, code is used to wait one second, then run the script again.

It’s a great script that looks really smooth sitting on a page. I think it looks great sitting on thispage, don’t you?

Next Week: Grabbing and Altering the Hour

---

Learn to write your own JavaScripts with the
JavaScript Goodies!

---

You can find many other uses for JavaScript
on your Web pages here!