|
In this part, we're going to use JavaScript to update a TextBox each second,
displaying the time. That doesn't sound too hard, right? Good. I'm glad we
agree. If you haven't yet viewed the first part and do not know much about the
Date object, please take the time to read over Part I.
Let's start with what we already understand--the Date object's methods for
displaying time. Here's what we're going to do. We will define a function named TimeNow()
in the header of an HTML document. This function will set the value of an HTML
TextBox to the current time. Then, it will call JavaScript's setTimeout()
function to update that TextBox each second. Let's get started. ^_^
Part 2
Start your HTML document and prepare a <SCRIPT> tag.
<HTML>
<HEAD>
<TITLE>Got the time? Part II</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- //Comment out for older browsers.
Define a function named TimeNow()
and use a left brace to begin the block of code.
function TimeNow()
{
Now enter what you've learned about the Date object's methods for getting the
time.
//Set rightnow equal to a new Date object.
var rightnow = new Date();
//Use the getHours() method to get the current hour.
var hr = rightnow.getHours();
//Use getMinutes() to get the minutes past the hour.
var min = rightnow.getMinutes();
//Use getSeconds() to get the seconds past the minute.
var sec = rightnow.getSeconds();
//If the hour is greater than or equal to 12, set
//AMPM equal to "PM." Set AMPM equal to "AM" otherwise.
var AMPM = (hr >= 12) ? "PM" : "AM";
//If the hour is greater than 12, set hr = to hr - 12
//to retrieve the current time for a 12-hour clock.
if (hr > 12) hr -= 12;
//If the hour equals zero, it's midnight, so set
//hr equal to twelve.
if (hr == 0) hr = 12;
//If the minutes or seconds are less than ten, add
//a zero in the tens place.
if (min < 10) min = "0" + min;
if (sec < 10) sec = "0" + sec;
Now we have to set the value of a TextBox HTML element. The format for
referencing an HTML element inside of a form is document.formname.element,
and that's what we'll use. In the sample HTML document, I've named my form timeform
and my TextBox timeoutput. Let's set
the value of timeoutput to the current
time, shall we?
document.timeform.timeoutput.value = hr +
":" + min + ":" + sec + " " + AMPM;
Next, we'll set our Timeout to call this function, TimeNow(),
again in one second. Notice that setTimeout()
determines the amount of time in milliseconds. This is the last part of the TimeNow()
function, so we can use the right brace to end the block of code. We can now end
the header, as well.
setTimeout("TimeNow()",1000)
}
//-->
</SCRIPT>
</HEAD>
It's time to define the BODY attributes. Here we must add onLoad="TimeNow();"
since we need the TimeNow() function
to begin as soon as the page loads. We can also add the form and the TextBox
referenced to in our script.
<BODY BGCOLOR="#FFFFFF"
TEXT="#000000" onLoad="TimeNow();">
<FORM NAME="timeform">
<FONT FACE="Arial,Helvetica" SIZE="2">The
current time:</FONT><BR>
<INPUT TYPE="TEXT" NAME="timeoutput"
SIZE="11">
</FORM>
</BODY>
</HTML>
And that's that! Congratulations. You've made it through the second part.
Ready for more? Of coz' Click here for go.. through...!!!
| 
