www.webdeveloper.com
Results 1 to 2 of 2

Thread: Time Zone Clock - Local times not displaying

  1. #1
    Join Date
    Mar 2013
    Location
    Toronto
    Posts
    1

    Time Zone Clock - Local times not displaying

    I am trying to create a web page that displays the local time at various locations around the world. I have reviewed each line of the code in both the .js document as well as the html document and I am at a loss as to what I am doing wrong. Any assistance that can be provided will be greatly appreciated. Thanks.

    Here is the HTML file.

    HTML Code:
    <html>
    <head>
    <title>World Clock</title>
    <link href="je.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="zones.js"></script>
    <script type="text/javascript">
    
       // Creates date object equal to the current date.
       var today = new Date(); 
    
       //Calculates the offset of current local time from GMT in minutes.
       var offSet = today.getTimezoneOffset()*60*1000;
    
      // Represents the current time in Greenwich UK.
       var GMT = addTime(today, offSet);
    
       // Location       City        Offset
       
       // Place1         Houston     (-360)
       // Place2         London      (0)
       // Place3         New York    (-300)
       // Place4         Seattle     (-480)
       // Place5         Sydney Au   (660)
       // Place6         Tokyo       (540)
    
       // Calculates the time at the various location around the world
       var time1 = addTime(GMT, (-360)*60*1000);//Houston
       var time2 = addTime(GMT, 0);//London
       var time3 = addTime(GMT, (-300)*60*1000);//New York
       var time4 = addTime(GMT, (-480)*60*1000);//Seattle
       var time5 = addTime(GMT, (660)*60*1000);//Sydney Au
       var time6 = addTime(GMT, (540)*60*1000);//Tokyo
    
       //Displays the current time at each location in the form element "zones"
       document.zones.place1.value =showTime(time1); // Houston
       document.zones.place2.value = showTime(time2); // London
       document.zones.place3.value = showTime(time3); // New York
       document.zones.place4.value = showTime(time4); // Seattle
       document.zones.place5.value = showTime(time5); // Sydney Au
       document.zones.place6.value = showTime(time6); // Tokyo
    
       </script>
    
    </head>
    
    <body onload= "setInterval('worldClock()', 1000)">
    <form id="zones" name="zones" action="">
    
    <div id="headbar">
       <img src="logo.jpg" alt="Jackson Electronics" />
       <h2>Corporate Headquarters World Clock</h2>
    </div>
    
    <div id="timemap">
    
       <input id="place1" name="place1" size="7"  />
       <input id="place2" name="place2" size="7"  />
       <input id="place3" name="place3" size="7"  />
       <input id="place4" name="place4" size="7"  />
       <input id="place5" name="place5" size="7"  />
       <input id="place6" name="place6" size="7"  />
    
       <img src="map.jpg" alt="World Map" id="map" />
       <table>
       <tr>
       <th id="name1">Houston</th>
       <th id="name2">London</th>
       <th id="name3">New York</th>
       <th id="name4">Seattle</th>
       <th id="name5">Sydney</th>
       <th id="name6">Tokyo</th>
       </tr>
       </table>
       <table>
       <tr>
       <td id="address3">
          <p><b>Jackson Electronics USA</b><br />
             10010 Park Street<br />
             New York NY 10001<br />
             <b>Phone: </b>(212) 555-1209<br />
             <b>Fax: </b>(212) 555-4001
          </p>
       </td>
       <td id="address4">
          <p><b>Jackson Electronics Ltd.</b><br />
             2349 Mitchell Street<br />
             Seattle, WA 65091<br />
             <b>Phone: </b>(381) 555-5499<br />
             <b>Fax: </b>(381) 555-3181
          </p>
       </td>
       <td id="address1">
          <p><b>Jackson Electronics Latin America</b><br />
             5150 Shasta Lane<br />
             Houston, TX 32821<br />
             <b>Phone: </b>(817) 555-8190<br />
             <b>Fax: </b>(817) 555-2881
          </p>
       </td>
       </tr>
       <tr>
       <td id="address2">
          <p><b>Jackson Electronics Europe</b><br />
             18 Northland Avenue<br />
             London, England WC2N 5EA<br />
             <b>Phone: </b>(+44) 0 870 555 7081<br />
             <b>Fax: </b>(+44) 0 870 555 1788
          </p>
       </td>
       <td id="address5">
          <p><b>Jackson Electronics Pacifica</b><br />
             171-105 Thomas Street<br />
             Sydney NSW 2000, Australia<br />
             <b>Phone: </b>(+61) 2 5555 8993<br />
             <b>Fax: </b>(+61) 2 5555 7171
          </p>
       </td>
       <td id="address6">
          <p><b>Jackson Electronics Asia</b><br />
             1-2-99 Sumiyoshi<br />
             Hakata-Ku<br />
             Tokyo 140-8781 Japan<br />
             <b>Phone: </b>(+81) 3 5551 7817<br />
             <b>Fax: </b>(+81) 3 5551 2398
          </p>
       </td>
       </tr>
       </table>
    </div>
    
    </form>
    </body>
    </html>
    Here is the JavaScript code:

    Code:
        function addTime(oldTime, milliSeconds){
    
        var newTime = new Date();// creates a new date object (no date specified).
        var newValue = oldTime.getTime() + milliSeconds; // Extracts the number of milliseconds in "oldTime" and add "milliSeconds" to it. Stores the value in a variable named "newValue".
        newTime = newValue.setTime(); // sets the value of newTime to the value of newValue using the setTime() method.
        return newTime; // returns the new value assigned to newTime.
    }
    
    // Returns a text string showing the time in 12 hour format.
    function showTime(time){
        var hour = time.getHours;
        var minute = time.getMinutes;
    
    // Changes hour from 24-hour format to 12-hour format by:
    
        // 1) Diplays AM or PM depending on time of day.
        var ampm = (hour < 12) ? "AM" : "PM";
    
        // 2) Subtracts 12 from the hour variable.
        hour = (hour > 12) ? hour - 12 : hour;
    
        // 3) Changes hour to 12, if it equals 0.
        hour = (hour == 0) ? 12 : hour;
    
        // Add leading zero to minutes less than 10.
        minute = minute < 10 ? "0" + minute : minute;
    
        return hour + ":" + minute + " " + ampm;
    }
    As far as I can see there are no syntax errors

  2. #2
    Join Date
    Feb 2006
    Posts
    2,927
    Forget the local offset, it has no relevance to other timezones.

    Use UTC time methods- for each timezone, add the offset (positive or negative) to the UTC time, then read the UTC properties, and not the local ones, to build your strings.

    (date.setUTCMinutes(date,getUTCMinutes()+offset), date.getUTCDate(), date.getUTCMinutes(), etc.)

    Get the UTCDate and day as well-some zones will be in different calendar days. You also need to have a dst switch on each timezone that uses dst,
    to assign the correct offset for that zone during dst as well as standard time.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles