HTML and CSS Reference
In-Depth Information
At the top of the Web page are Web form fields in which the current date, current
time, and countdown clock will appear. The fields are enclosed within a form named
clockform
. Figure 11-2 shows the names of the fields within the form along with sample
values for each field.
Figure 11-2
Fields in the clock form
dateNow
timeNow
day
s
Left
hrs
L
eft
minsLeft
secsLeft
altafulla/Shutterstock.com; jbdphotography/Shutterstock.com
Hector wants these values to be constantly updated to reflect the current date and
time. To do this, you'll write a JavaScript function that returns the current date and time
and calculates the time remaining until New Year's Day, and then updates those values
once every second. You'll start creating this function by exploring how to insert values
into a Web form. The general command to set a field value is
document.
form
.
field.
value =
value
;
where
form
is the name of the Web form,
field
is the name of the field, and
value
is
the value you want placed into the field. For example, for Hector's Web page, the current
date is stored in the
dateNow
field of the
clockform
Web form. To set the value of this
field to the text string
2/24/2015
, you would use the following JavaScript command:
document.clockform.dateNow.value = “2/24/2015”;
Similarly, to set the value of the
timeNow
field to the text
2:35:05 p.m.
, you would use
the following JavaScript command:
document.clockform.timeNow.value = “2:35:05 p.m.”;
You'll start your work by writing sample values into the Web form using a JavaScript
function named NYClock(). These sample values will act as placeholders until you learn
how to calculate actual date and time values, and will allow you to confirm that your
code is correctly writing text to the Web form fields.
