HTML Source box #2 - 3CITIES.HTM

<html>

<head>
<title>Javascript Clock</title>
<script LANGUAGE="Javascript">
<!--
//dummy function …
function calculateOffset() {
    currentTime = new Date();
    browserTimeDifference = currentTime.getTimezoneOffset();
    document.displayClock.gmtoffset.value = browserTimeDifference/60;
}

//the function to get the time data
function setTime() {
    //initialise variables

    //GMT adjustments for Sydney and San Francisco
    //alter to +11 and -8 in October to account for daylight savings
    //reset to +10 and -7 in March
    sydneyGMTadjustment = 10;
    sanfranciscoGMTadjustment = -7;

    //new date object for your visitors time
    sanfranTime = new Date();
    localTime = new Date();
    sydneyTime= new Date();   

    //build display string for local time
    localTime = buildTimeString(localTime);

    //calculate the browser's opinion of the local GMT time difference
    //and calculate the real one..
    timeDifference = document.displayClock.gmtoffset.value*60;

    //adjust sanfranTime to show sanfrancisco time
    sanfranTime.setMinutes(sanfranTime.getMinutes() - timeDifference + sanfranciscoGMTadjustment*60);
    sanfranTime = buildTimeString(sanfranTime);

    //adjust sydneyTime to display Sydney time
    sydneyTime.setMinutes(sydneyTime.getMinutes() - timeDifference + sydneyGMTadjustment*60);
    sydneyTime = buildTimeString(sydneyTime);

    //display these strings in the text boxes on the form
    document.displayClock.sydneytime.value = sydneyTime;
    document.displayClock.sanfranciscotime.value = sanfranTime;
    document.displayClock.localtime.value = localTime;


    //call this function again in 10 seconds time
    setTimeout ("setTime()", 10000)
}

function buildTimeString (currentTime) {
    var currentHours = currentTime.getHours();
    var currentMinutes = currentTime.getMinutes();

    //assume it is the afternoon
    var currentAmPm = "pm"

    //adjust for a 24 hour clock
    if (currentHours > 12)
        currentHours = currentHours - 12;
    else    {

        //set 'am' for hours 0 - 11 inclusive
        if (currentHours <= 11)
            currentAmPm = "am";

        //adjust for midnight
        if (currentHours == 0)
            currentHours = currentHours + 12;
    }
    //pad hours to two digits
    if (currentHours <= 9)
                currentHours = " " + currentHours

    //pad minutes to two digits
    if (currentMinutes <= 9)
        currentMinutes = "0" + currentMinutes
   
    //build a string for the time
    currentTime = currentHours + ":" + currentMinutes + currentAmPm;
    return currentTime;
}
//-->
</script>
</head>

<body OnLoad="calculateOffset();setTime()" BGCOLOR="#004080" TEXT="#FFEEEE" VLINK="yellow">
<font FACE="arial">

<h1>International times </h1>

<table CELLPADDING="10">
<tr>
<td WIDTH="50%">This is a simple Javascript application which reads the system clock and
displays local time and the time in these two other cities updating it at 10 second
intervals.<p><i>This clock has some erratic habits as some browsers can't calculate the
difference between your time and GMT accurately - it's not hard - they just don't do it
right. The GMT offset that your browser has calculated for you is shown above the clock,
if it's incorrect or if you aren't sure if it's correct or not,<font color="#FFFF80"> <a
HREF="gmts.htm" style="color: rgb(255,255,128)">check here</a></font> to find out your GMT
and enter the number in the text box manually.<br>
</i></td>
<td VALIGN="TOP" WIDTH="50%"><!-- The clock is displayed in a text input box on a form --> <form NAME="displayClock">
<table>
<tr>
<td>The current GMT offset for your city is: </td>
<td><input TYPE="text" NAME="gmtoffset" onChange="setTime ()" SIZE="8"> Hours</td>
</tr>
<tr>
<td><h2>Time in Sydney: </h2>
</td>
<td><input TYPE="text" NAME="sydneytime" SIZE="8"></td>
</tr>
<tr>
<td><h2>Your Local Time: </h2>
</td>
<td><input TYPE="text" NAME="localtime" SIZE="8"></td>
</tr>
<tr>
<td><h2>Time in San Francisco:</h2>
</td>
<td><input TYPE="text" NAME="sanfranciscotime" SIZE="8"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</font>
</body>
</html>


Return to main article