World Clock - based on Timezone

        This javascript code allows you to display the time based on the user’s timezone. The script makes use of the inbuilt javascript ‘Date’ object and its functions. The clock displays time in the default 12 hour format, that can be changed to a 24 hours using a radio button. Also we are displaying the current day and date. The user can also change the timezone using a select box, and thus can view the current time in different timezones.

        First lets have a look at the form. The form consists of two div elements, one for displaying time and the other for displaying day and date. There is a select element (selectTZ) which consists of all time-zones.

<div name="timeText" id="timeText"></div>
<div name="dayText" id="dayText"></div>
<select name='selectTZ' id='selectTZ'>
    <option value='0'>Select your Timezone</option>
    <option value='-12:00'>(-12:00) International Date Line West</option>
    <option value='-11:00'>(-11:00) Midway Island, Samoa</option>
          ……………….
</select>

        Now lets start with the javascript code. First we have to retrieve the current date and time. The following line of code do this.

// create new date object
  var time =  new Date();
  // get the formatted date value
  var dayText = returnFormattedDate(time);
  // get the formatted time value (hh:mm:ss or hh:mm:ss pm/am))
  var timeText =  returnFormattedTime(time);
  // passing formatted value to divs
  document.getElementById("timeText").innerText=timeText;    
  document.getElementById("dayText").innerText=dayText;

        The ‘returnFormattedDate()’ and ‘returnFormattedTime()’ functions return the date and time respectively in a specific format. ‘returnFormattedDate()’ returns date in “Monday, 01 January 2010” format. Whereas, ‘returnFormattedTime()’ returns time in any of the two formats, “23:45:06” or “11:45:06 pm”.
       The above code can be modified for using time-zones as follows.

function calculateZoneTime(SelectTimeZone)
{
     // if timezone not selected
    if(SelectTimeZone=='0')
    {
        document.getElementById("timeText").innerText="00 : 00 : 00";
        document.getElementById("dayText").innerText= "please select a timezone";
        return true;
    }
    // get current date object
    var zDate = new Date();
    //  retrieve offset of the selected timezone in decimal format
    var ZoneOffset = retrieveOffset(SelectTimeZone);
    // adding the time difference to current time (in milliseconds)
    var ms = zDate.getTime() + (zDate.getTimezoneOffset() * 60000) + ZoneOffset * 3600000;
    // creating a date object using the calculated zone time
    var time =  new Date(ms);
    var dayText = returnFormattedDate(time);
    var timeText =  returnFormattedTime(time);
    document.getElementById("timeText").innerText=timeText;
    document.getElementById("dayText").innerText=dayText;
}

         Here the function parameter ‘SelectTimeZone’ is the value of the time-zone that is selected in the ‘selectTZ’ select. The ‘retieveOffset()’ function converts the parameter value from the “4:30” format to a “4.5” format, so that it can be used for date calculations. This offset is then added to the current time, to get the time-zone specific time.

        The code for ‘retieveOffset()’ is as follows:

function retrieveOffset(TimeZoneOffset)
{
      try
      {
         // calculating the whole and decimal part of the offset
         var timeArray = TimeZoneOffset.split(":");
         var hrs = parseInt(timeArray[0]);
         var mins = parseInt(timeArray[1])/60;
       }
      catch(err){  alert("error"); }
     // adding or deleting the decimal part and whole part
      var offset = (hrs > 0) ? (hrs + mins) : (hrs - mins);
      return offset; 
}

        Now we have to update the time every second. For this we have a ‘init()’ function. The function calls the ‘calculateZoneTime()’ function and repeats itself using the setInterval function.

function init()

{
     try
     {
             // try to clear any interval previously set
              clearInterval(myInterval);
     }
     catch(err){}
     // calculate time based on select value
     calculateZoneTime(document.getElementById("selectTZ").value) ;
     // repeat the init function each sec (1000ms = 1 sec)
     myInterval = setInterval("init()",1000);    

}

        This sums up the article. Hope this helps. This post is open for your queries and suggestions.
You can find the code (with HTML) in its entirety here. Also you can find an advanced version of the script that loads the current time zone as default on the clock, here.