City World Clock - based on Timezone

        This javascript code snippet allows you to display the time of a city, selected from a drop-down. It also loads the current time and location as the default time and location (based on computer’s timezone and entry in dropdown list). The script is mostly similar to the previous post.

        Here also we have 2 divs for displaying time and date, and a select drop-down for selecting city. We are also using the ‘calculateZoneTime()’ function for calculating time. Also we have slightly modified ‘returnFormattedDate()’ and ‘returnFormattedTime()’ functions for formatting date and time respectively. The time is updated every second using the ‘init()’ function. The ‘init()’ function calls the ‘calculateZoneTime()’ function and repeats itself using the setInterval function.

        An additional function is ‘calculateDefaultTimeZone()’ which is used for calculating the computer’s current timezone and setting the html select to that particular timezone on page load.
function calculateDefaultTimeZone()
{
      var newDate = new Date();
      // finding current timezone – received in decimal format
      var timeOffset = (newDate.getTimezoneOffset()/60) * (-1);
      var timeZone1 = document.getElementById('selectTZ1');
      // converting decimal format to “hh:mm” format
      var formattedOffset = formatTimeOffset(timeOffset);
       
      if (timeZone1)
     {
           // finding the current timezone in select drop-down
           for (var i = 0; i < timeZone1.options.length; i++)
          {
              if (timeZone1.options[i].value == formattedOffset)
             {
                 timeZone1.selectedIndex = i;
                 break;
            }
      }
  }
}
        The ‘formatTimeOffset()’ function converts the calculated current time zone from a decimal format to a  “+/-hh:mm”  format. Here is the function code:
function formatTimeOffset(value)
{
    var hours = parseInt(value);
    value -= parseInt(value);
    value *= 60;
    var mins = Math.abs(parseInt(value));
    var display_hours = hours;   
    var display_mins = (mins < 10) ? ("0" + mins) : mins;
    timeZoneString = display_hours + ":" + display_mins;
    return timeZoneString;
}
Hope this is helpful to you.
You can find the entire code along with html from here.
Please enter your valuable comments and suggestions.

0 comments: