Clocks of different Time Zones

Timezones of the world
Select one time zone

  • Real time Clock of Timezones

JavaScript function to generate the date and time of Timezone

<script>function disp_TZ(){[].value;
str= new Date().toLocaleString("en-NZ", 
	{timeZone: tz,timeZoneName:"short"})
document.getElementById('ct').innerHTML = str + "," + tz;
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
<span id='ct' style="background-color: #FFFF00">
Select one time zone </span>
Copy the List of JavaScript Array of Timezones

PHP code to generate dropdown list with timezones

<form method=post name=f1>
$a = timezone_identifiers_list();
echo "<select name=tz onChange=disp_TZ() class='form-control'>";
while (list ($key, $val) = each ($a)) {
//echo "$key -> $val <br>";
echo "<option value=$val>$val</option>";
echo "</select>";

PHP code to generate JavaScript array with timezones list

$str= "<script>";
$str.="var my_timezones=[\n";
while (list($key,$val) = each ($a)) {
echo $str;
Copy the List of JavaScript Array of Timezones

Read more on timezone_identifiers_list() function in PHP

Using offset from current date and time ( old script )
<script type="text/javascript"> 
var day_name=new Array(7);

day_name[1]=' Monday'

function display_c(){
var refresh=1000; // Refresh rate in milli seconds

function display_ct() {
var strcount
var x = new Date();
document.getElementById('ct').innerHTML = x;
var x1=x.toUTCString();// changing the display to UTC string
var gmt=new Date();
var offSet=x.getTimezoneOffset(); 
document.getElementById('ct1').innerHTML = gmt.getHours() + ":" +gmt.getMinutes() + ":" + gmt.getSeconds();

function city_zone(offSet){
var t1=new Date();
var offSet1=t1.getTimezoneOffset(); 
t1.setMinutes(t1.getMinutes()+offSet1); // arrive at GMT tme
t1.setMinutes(t1.getMinutes()+offSet);   // add the city time offset 
var str=t1.getMonth() + 1;  
return t1.getHours() + ":" +t1.getMinutes() + ":" + t1.getSeconds() + " <i>Day:</i> "  + day_name[t1.getDay()] + ", <i>Date :</i> " + t1.getDate() + " <i>Month :</i> " +  str;

// Go for different City time ///

document.getElementById('ct2').innerHTML = city_zone(-420); // Arizona 
document.getElementById('ct3').innerHTML = city_zone(-480); // California
document.getElementById('ct4').innerHTML = city_zone(600); // New South Wales

HTML part
<table class='table table-striped'>  
<tr class='info'><td>Area </td><td>Time</td><td>Time Off Set </td></tr>
<tr class='danger'><td>Local </td><td colspan=2><span id='ct' ></span></td></tr>
<tr class='success'><td>GMT </td><td><span id='ct1' ></span></td><td></td></tr>
<tr><td>Arizona </td><td><span id='ct2' ></span></td><td>-7 Hrs</td></tr>
<tr><td>Carlifornia </td><td><span id='ct3' ></span></td><td>-8 Hrs</td></tr>
<tr><td>New South Wales</td><td><span id='ct4' ></span><td>10 Hrs</td></td></tr>
Date Reference Showing Changing Clock

Post your comments , suggestion , error , requirements etc here

We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2021 All rights reserved worldwide Privacy Policy Disclaimer