Java Reference
In-Depth Information
In addition, don't forget that some users may not even have their regional settings set correctly—there's
no easy way around this problem.
In the body of this page is a pair of
<div/>
elements used for output:
<div>Local Time is <span id="spanLocalTime"></span></div>
<div id="divCityTime"></div>
There's also a form in which you've defined a list box using a
<select>
element:
<select size="5" name="lstCity">
<option value="60" selected>Berlin
<option value="330">Bombay
<option value="0">London
<option value="180">Moscow
<option value="-300">New York
<option value="60">Paris
<option value="-480">San Francisco
<option value="600">Sydney
</select>
Each of the options displays the city's name in the list box and has its value set to the difference in
minutes between that city's time zone (in winter) and UTC. So London, which uses UTC, has a value of
0
. Paris, which is an hour ahead of UTC, has a value of
60
(that is,
60
minutes). New York, which is five
hours behind UTC, has a value of
‐300
.
There's also a check box with an associated label:
<p>
<input type="checkbox" id="chkDst" name="chkDst" />
<label for="chkDst">Adjust city time for Daylight Savings</label>
</p>
Checking this check box will add an hour to a city's calculated time.
You'll register the
change
event listener of the
<select/>
element and the
click
event listener of the
check box to call the
updateTimeZone()
function. As with previous versions, you create a global
variable to provide easier access to the
<form/>
element object:
var myForm = document.form1;
Then you register the event listeners:
myForm.lstCity.addEventListener("change", updateTimeZone);
myForm.chkDst.addEventListener("click", updateTimeZone);
The function
updateTimeZone()
doesn't really update anything, but it does gather information and
kick off the update process:
function updateTimeZone() {
var lstCity = myForm.lstCity;
