Page 5 —
A JavaScript Clock
The time is now:
Click on the start clock button to turn the clock on. This clock reads the time off your computer and then updates the textbox every half second. I'm showing you this for two reasons. First, it's another example of making a timer by having a function call itself. Second, it shows you a little more about the Date object, which I mentioned back when we covered cookies.
Here's the code:
function writeTime() {
// get a date object
var today = new Date();
// ask the object for some information
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
// fixTime makes the minutes and seconds look right
// it just sticks a zero in front of numbers less than 10
minutes = fixTime(minutes);
seconds = fixTime(seconds);
// put together the time string and write it out
var the_time = hours + ":" + minutes + ":" + seconds;
window.document.the_form.the_text.value = the_time;
// run this function again in half a second
the_timeout= setTimeout('writeTime();',500);
}
function fixTime(the_time) {
if (the_time <10)
{
the_time = "0" + the_time;
}
return the_time;
}
It might look a little long, but that's just because it's well commented. Let's go through the code line by line.
var today = new Date();
Just as new Array() creates a new Array object for you to fill, new Date() creates a new Date object.
Once you have the object, you can ask it questions about itself. When you create a Date object with nothing between the parentheses, as we've done, JavaScript looks at the computer's clock and uses it to create a new Date object. Now that we have a Date object, called "today," we can get information from it.
var hours = today.getHours();
This is how to get the current hour. It's military time, so if it's 2 p.m. when you get the new Date(), getHours() will return "14." Understand that getHours() is a built-in method call of the JavaScript Date object.
As is the case with most JavaScript objects, the way to know when you should use getHours is by checking with a good JavaScript reference book.
var minutes = today.getMinutes(); var seconds = today.getSeconds();
These lines are just like getHours();.
minutes = fixTime(minutes);
One problem with getMinutes is that if it's 11:01, getMinutes will return a "1." This is fine unless
you want to make a clock like we do, in which case, we want the "1" to be written as "01." That's what the fixTime function that I wrote does. It's a pretty straightforward function, so I'm not going to describe it. Just
take a quick look at it to see what it's doing.
The next two lines put the string together and write it to the form element.
We've seen this sort of nonsense a million times.
the_timeout = setTimeout('writeTime();', 500);
This is the line that makes the loop. It says "in half a second, call the function again." When the function gets called again, it does another today = new Date(), which sends it to the computer's clock again. The interval could have been every second, but doing it every half second helps keep the time more accurate.
OK, enough of the looping timer trick. There's one more thing you should know about timers: how to use them with variables.
