Cut & Paste Drop Down World Clock

Home / Free JavaScripts / Clocks, Calenders, And Timers / Here

Cut & Paste Drop Down World Clock

Description: Look up the time of various cities around the world easily with this useful script! Configurable to use cities of your choice. Note: Portions of script by Kurt Grigg.

Example:

Directions: Simply add the below code to the <BODY> section of your page:

<table border="0" width="200" cellspacing="0" cellpadding="3"> <form name="where"> <tr> <td width="100%"> <select name="city" size="1" onchange="updateclock(this);"> <option value="" selected>Local time</option> <option value="0">London GMT</option> <option value="1">Rome</option> <option value="7">Bangkok</option> <option value="8">Hong Kong</option> <option value="9">Tokyo</option> <option value="10">Sydney</option> <option value="12">Fiji</option> <option value="-10">Hawaii</option> <option value="-8">San Francisco</option> <option value="-5">New York</option> <option value="-3">Buenos Aires</option> </select> </td> </tr> <tr> <td width="100%"> <script language="JavaScript"> /* Drop Down World Clock- By JavaScript Kit (http://www.javascriptkit.com) Portions of code by Kurt @ http://www.btinternet.com/~kurt.grigg/javascript This credit notice must stay intact */ if (document.all||document.getElementById) document.write('<span id="worldclock" style="font:bold 16px Arial;"></span><br />') zone=0; isitlocal=true; ampm=''; function updateclock(z){ zone=z.options[z.selectedIndex].value; isitlocal=(z.options[0].selected)?true:false; } function WorldClock(){ now=new Date(); ofst=now.getTimezoneOffset()/60; secs=now.getSeconds(); sec=-1.57+Math.PI*secs/30; mins=now.getMinutes(); min=-1.57+Math.PI*mins/30; hr=(isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone); hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360; if (hr < 0) hr+=24; if (hr > 23) hr-=24; ampm = (hr > 11)?"PM":"AM"; statusampm = ampm.toLowerCase(); hr2 = hr; if (hr2 == 0) hr2=12; (hr2 < 13)?hr2:hr2 %= 12; if (hr2<10) hr2="0"+hr2 var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs)+' '+statusampm; if (document.all) worldclock.innerHTML=finaltime else if (document.getElementById) document.getElementById("worldclock").innerHTML=finaltime else if (document.layers){ document.worldclockns.document.worldclockns2.document.write(finaltime) document.worldclockns.document.worldclockns2.document.close() } setTimeout('WorldClock()',1000); } window.onload=WorldClock //--> </script>  <ilayer id="worldclockns" width=100% height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 16px Arial;"></layer></ilayer> This free script provided by <a href="http://www.javascriptkit.com">JavaScript Kit</a> </td> </form> </tr> </table>

To use your own cities, simply add them into the drop down menu (via <OPTION> tags), and specify the city's offset (from GMT) inside each tag's value attribute. Enjoy!

CSS Library | JavaScript & DHTML Menus

JavaScript Tools:

Site Info