Welcome to Australian PC User Magazine Offline CD-ROM PC User Online - Your complete guide to the Internet
Get on the Net Guide Games' Guide Education General & Business Applications Online Tools - All your Net Essentials Utilities Patches & Support Files PC User Interactive - Exclusive tutorials
Software Contents


John Hilvert and Helen Bradley explain how to set your Web page clock to display the time of different global locations.

Back in our October issue we ran this tutorial. However some of you may have found that the Java didn't actually work! We have updated the code used in the 3 Cities example below so that it should now work in any java capable browser


In February, we showed you how to create a JavaScript clock to show the time on a Web page. The clock as it was designed shows the system time as it's set on your visitor's machine.

We received a lot of e-mail asking us if the clock could be altered to show the time in Sydney (or any other specific global location) regardless of where the visitor came from. Well it can and here are two versions of it that you can create for your Web page.

We've provided all the files you need for this project on this month's (October 98) cover CD-ROM.

To view or use the source code you can use any HTML editor, text editor and most Web browsers.

These routines work well with client side forms and allow you to program and test your pages easily without having to resort to server side CGI scripts.


clock1.gif (3440 bytes)
Figure 1d: This simple adaptation of the clock from February's Web Workshop tutorial will display the time in Sydney on your visitor's PC.
A simple Sydney clock
The source code in Source Box 1 creates a clock which will show the local time in Sydney and which can be adapted to show the local time in any city. The alteration which has been made to the code from the previous version simply adjusts the visitor's time to Sydney time using built-in JavaScript methods. The date method getTimezoneOffset() returns difference in minutes between the visitor's local time and Greenwich Mean Time (GMT). The code takes this offset and subtracts it from the visitor's local time and then adds the GMT offset for Sydney which is +10 hours (+11 hours in summer). If you live in Perth, Darwin, Adelaide or outside Australia, alter this line of code and set the number of hours your city is ahead of GMT:

myLocalGMT = 10;

A more complex international clock
The source code in Code Box 2 is more elaborate. It shows the Visitor's local time as well as the time in two other cities, here Sydney and San Francisco have been used.

This code is quite different to the other clock and you will notice that three instances of the date object have been created -- one for each date. This is required because JavaScript sends a variable's address and not its contents to a function such as setTime when you call it. This, in turn, means that the information at the address itself will be altered by the function. If you only have one date object you will get errors if you try to use it for the times in all three cities.

You could share one date object between the local time and Sydney time because the local time is not sent to a function that will alter it. However, the variables sydneyTime and sanfranTime must be separate instances of the date object or you'll get logic errors. We have taken the precaution of making all three times different instances of the date object. In this example the statements which build up a time string so it can be later displayed on the Web page have been moved to a separate function called 'buildTimeString. Each time a time string is required this function is called and the current time is sent to it as a parameter.


clock2.gif (3997 bytes)
Figure 2d: This more sophisticated example shows the time on this London visitor's computer and the corresponding time in San Francisco and Sydney.


note.gif (244 bytes)Sydney Clock
View this example now

View the source Code for this page

note.gif (244 bytes)3 Cities
View this example now

View the source Code for this page


toppage.gif (1757 bytes)copyrite.gif (1355 bytes)