Java Reference
In-Depth Information
Save this page as WorldTimeConverter.htm and then load the page into your browser.
The form layout looks something like the one shown in Figure 10-4. Whenever the user clicks a city in
the list, her local time and the equivalent time in the selected city are shown. In the example shown in
Figure 10-4, the local region is set to Eastern Standard Time in the U.S. (for a city such as New York),
and the selected city is Berlin, with the daylight savings box checked.
Figure 10-4
It's worth pointing out that this is just an example and not a totally foolproof one, because of the prob-
lems presented by daylight savings. Some countries don't have it, others do at fi xed times of year, and
yet others do but at varying times of the year. This makes it diffi cult to predict accurately when a coun-
try will have its daylight savings period. You have tried to solve this problem by adding a check box for
the user to click if the city she chooses from the list is using daylight savings hours (which you assume
will put the time in the city forward by one hour).
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 the World Time Converter page is a form in which you've defi ned a list box using a
<select> element.
<select size=”5” name=”lstCity” onchange=”updateTimeZone();”>
<option value=”60” selected>Berlin
<option value=”330”>Bombay
<option value=”0”>London
<option value=”180”>Moscow
<option value=”-300”>New York (EST)
<option value=”60”>Paris
<option value=”-480”>San Francisco (PST)
<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 min-
utes 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 fi ve
hours behind UTC, has a value of
-300
.
You'll see that you have captured the change event of the <select> element and connected it to the
function updateTimeZone() defi ned in a script block in the head of the page. This function involves
three global variables defi ned at the top of the script block.
var timeDiff;
var selectedCity;
var daylightSavingAdjust = 0;
