DEmo of Clock showing present time of different time zones of the world in JavaScript

Demo of Clocks of different Time Zones

Timezone here
Hour Minutes Sec here

<span id=ct>Timezone here </span><br>
<span id=ct2>Hour Minutes Sec here </span><br>
<input type=button value='Show' onClick=disp_TZ()>
<form name=f1>
<select name=tz onChange=disp_TZ()>
</select>
</form>
<script>
function disp_TZ(){
  //tz='Africa/Accra'
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

dt2 = new Date();
str2 = new Date(dt2.toLocaleString('en-US',{
    timeZone: tz}));

diff=dt2.getTime()-str2.getTime();	
dt3=new Date(dt2.getTime()-diff);
hour=dt3.getHours();
minute=dt3.getMinutes();
seconds=dt3.getSeconds();
str3= hour + ':' + minute + ':' + seconds 
document.getElementById('ct2').innerHTML= str3

display_c()
}
function display_c(){
refresh=1000
mytime=setTimeout('disp_TZ()',refresh)
}
var my_timezones=[
'Africa/Abidjan',
'Africa/Accra',
'Africa/Addis_Ababa'
]
for(i=0;i<my_timezones.length;i++){
  addOption(document.f1.tz,my_timezones[i],my_timezones[i])
}
function addOption(selectbox,text,value){
var optn=document.createElement("OPTION")
optn.text=text
optn.value=value
selectbox.options.add(optn)
}
</script>
<br><br>
Check the updated code at <br>
<a href=https://www.plus2net.com/javascript_tutorial/clock-time-zones.php>https://www.plus2net.com/javascript_tutorial/clock-time-zones.php</a><br>

Date Reference Showing Changing Clock Time Zones Clock

Subscribe to our YouTube Channel here

This article is written by plus2net.com team.

plus2net.com

▼ More on JavaScript Date