Clocks of different Time Zones

• Real time Clock of Timezones

JavaScript function to generate the date and time of Timezone

<script>function disp_TZ(){
tz=f1.tz.options[f1.tz.options.selectedIndex].value;
str= new Date().toLocaleString("en-NZ", 
	{timeZone: tz,timeZoneName:"short"})
document.getElementById('ct').innerHTML = str + "," + tz;
display_c()
}
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('disp_TZ()',refresh)
}
</script>

<span id='ct' style="background-color: #FFFF00">
Select one time zone </span>

PHP code to generate dropdown list with timezones

<form method=post name=f1>
<?Php
$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>";
?>
</form>

PHP code to generate JavaScript array with timezones list

<?Php 
$str= "<script>";
$str.="var my_timezones=[\n";
$a=timezone_identifiers_list(); 
while (list($key,$val) = each ($a)) {
$str.="'".$val."',\n";
}
$str.="]\n
</script>";
echo $str;
?>

<script type="text/javascript"> 
var day_name=new Array(7);

day_name[0]='Sunday'
day_name[1]=' Monday'
day_name[2]='Tuesday'
day_name[3]='Wednesday'
day_name[4]='Thursday'
day_name[5]='Friday'
day_name[6]='Saturday'

function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}

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(); 
gmt.setMinutes(x.getMinutes()+offSet);
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


tt=display_c();
}
</script>

<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>
</table>