I was hoping someone could help me out with this. This Javascript calls a value from a dropdown menu and Writes or displays the final World Time on a webpage. I was hoping to get rid of the dropdown and display 3 world times at the same time by hardcoding the values maybe. i.e. - London 07:04 :04 Hong Kong 03:03:04 New York 06:05:04 Is that possible? Can anyone help? Thanks in advance! The month and day would be frosting. It's not in the code. <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> <!--Place holder for NS4 only--> <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> <font face="arial" size="-2">This free script provided by <a href="http://www.javascriptkit.com">JavaScript Kit</a></font> </td> </form> </tr> </table>
for world wime i use this http://forum1.aest.org.uk/time.htm if any of that does what you want i will let you know how to do it.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> World Clock </title> <script type="text/javascript"> var GMToffset = -4; // Your CURRENT local GMT offset, whether Daylight or Standard var localDST = true; // true if you are currently using Daylight time var cityOffset = []; // GMT Offsets are Standard Time for that location cityOffset[1] = 1; cityOffset[2] = 10; cityOffset[3] = -10; var zoneDate = ""; function update(i){ var PM = false; document.getElementById('cityDay'+i).lastChild.data = zoneDate.toString().substring(0,3); document.getElementById('cityDate'+i).lastChild.data = zoneDate.getDate()+" "+zoneDate.toString().substring(4,7)+" "+zoneDate.getFullYear(); var nHours = zoneDate.getHours().toString(); var nMins = zoneDate.getMinutes().toString(); if (nMins < 10){nMins = "0"+nMins} if (nHours > 12){nHours = nHours-12; PM=true} var timeStr = nHours+":"+nMins; if (PM){timeStr += " PM"} if (!PM && nHours != 12){timeStr += " AM"} if (!PM && nHours == 12){timeStr += " PM"} if (!PM && nHours == 0){timeStr = timeStr.replace(/0:/,"12:")} document.getElementById('cityTime'+i).lastChild.data = timeStr; if (localDST){document.getElementById('dispDST').lastChild.data = 'Yes'} else {document.getElementById('dispDST').lastChild.data = 'No'} } function dispClocks(){ document.getElementById('localMsg').lastChild.data = "Local Time GMT "+GMToffset; var PM = false; var index = ""; var refDate = new Date(); refDate.setHours(GMToffset+refDate.getHours()+refDate.getTimezoneOffset()/60); document.getElementById('localDay').lastChild.data = refDate.toString().substring(0,3); document.getElementById('localDate').lastChild.data = refDate.getDate()+" "+refDate.toString().substring(4,7)+" "+refDate.getFullYear(); var nHours = refDate.getHours().toString(); var nMins = refDate.getMinutes().toString(); if (nMins < 10){nMins = "0"+nMins} if (nHours > 12){nHours = nHours-12; PM=true} var timeStr = nHours+":"+nMins; if (PM){timeStr += " PM"} if (!PM && nHours != 12){timeStr += " AM"} if (!PM && nHours == 12){timeStr += " PM"} if (!PM && nHours == 0){timeStr = timeStr.replace(/0:/,"12:")} document.getElementById('localTime').lastChild.data = timeStr; for (i=1; i<cityOffset.length; i++) { index = cityOffset[i]; if (document.getElementById('DST'+i).checked){index++} zoneDate = new Date(); zoneDate.setHours(index+zoneDate.getHours()+zoneDate.getTimezoneOffset()/60); update(i); } setTimeout("dispClocks()",60000); } onload=dispClocks; </script> </head> <body> <table align='center' border='1' cellspacing='0' cellpadding='5' style='font-size:11pt;background-color:lightyellow'> <thead style='background-color:moccasin'> <tr> <th> Location </th> <th> Day </th> <th> Date </th> <th> Time </th> <th> DST </th> </tr> </thead> <tfoot> <tr> <td id='localMsg' colspan='5' align='center' style='font-size:8pt;background-color:lightgreen;padding:1px'> </td> </tr> </tfoot> <tbody> <tr style='background-color:lightgreen'> <td> New York </td> <td id='localDay' align='center'> </td> <td id='localDate' align='center'> </td> <td id='localTime' align='center'> </td> <td id='dispDST' align='center'> </td> </tr> <tr> <td> Madrid </td> <td id='cityDay1' align='center'> </td> <td id='cityDate1' align='center'> </td> <td id='cityTime1' align='center'> </td> <td align='center'> <input type='checkbox' id='DST1' onclick="dispClocks()" checked disabled> </td> </tr> <tr> <td> Sydney </td> <td id='cityDay2' align='center'> </td> <td id='cityDate2' align='center'> </td> <td id='cityTime2' align='center'> </td> <td align='center'> <input type='checkbox' id='DST2' onclick="dispClocks()" disabled> </td> </tr> <tr> <td> Honolulu </td> <td id='cityDay3' align='center'> </td> <td id='cityDate3' align='center'> </td> <td id='cityTime3' align='center'> </td> <td align='center'> <input type='checkbox' id='DST3' onclick="dispClocks()" disabled> </td> </tr> </tbody> </table> </html> Code (markup):
Mike - Brilliant!! Thanks so much! I was able to work with this and get just what I needed. I changed the form input to hidden. Took out the cell colors for white background. Added a style and made it Horizontal. Perfect to put in a few world times at the top of a webpage!! Thanks again and let me know if I can be of help in the future. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>4 cities table world clock</title> <script type="text/javascript"> var GMToffset = -7; // Your CURRENT local GMT offset, whether Daylight or Standard var localDST = true; // true if you are currently using Daylight time var cityOffset = []; // GMT Offsets are Standard Time for that location cityOffset[1] = -5; cityOffset[2] = +1; cityOffset[3] = +9; var zoneDate = ""; function update(i){ var PM = false; document.getElementById('cityDay'+i).lastChild.data = zoneDate.toString().substring(0,3); document.getElementById('cityDate'+i).lastChild.data = zoneDate.getDate()+" "+zoneDate.toString().substring(4,7)+" "+zoneDate.getFullYear(); var nHours = zoneDate.getHours().toString(); var nMins = zoneDate.getMinutes().toString(); if (nMins < 10){nMins = "0"+nMins} if (nHours > 12){nHours = nHours-12; PM=true} var timeStr = nHours+":"+nMins; if (PM){timeStr += " PM"} if (!PM && nHours != 12){timeStr += " AM"} if (!PM && nHours == 12){timeStr += " PM"} if (!PM && nHours == 0){timeStr = timeStr.replace(/0:/,"12:")} document.getElementById('cityTime'+i).lastChild.data = timeStr; if (localDST){document.getElementById('dispDST').lastChild.data = 'Yes'} else {document.getElementById('dispDST').lastChild.data = 'No'} } function dispClocks(){ document.getElementById('localMsg').lastChild.data = "Local Time GMT "+GMToffset; var PM = false; var index = ""; var refDate = new Date(); refDate.setHours(GMToffset+refDate.getHours()+refDate.getTimezoneOffset()/60); document.getElementById('localDay').lastChild.data = refDate.toString().substring(0,3); document.getElementById('localDate').lastChild.data = refDate.getDate()+" "+refDate.toString().substring(4,7)+" "+refDate.getFullYear(); var nHours = refDate.getHours().toString(); var nMins = refDate.getMinutes().toString(); if (nMins < 10){nMins = "0"+nMins} if (nHours > 12){nHours = nHours-12; PM=true} var timeStr = nHours+":"+nMins; if (PM){timeStr += " PM"} if (!PM && nHours != 12){timeStr += " AM"} if (!PM && nHours == 12){timeStr += " PM"} if (!PM && nHours == 0){timeStr = timeStr.replace(/0:/,"12:")} document.getElementById('localTime').lastChild.data = timeStr; for (i=1; i<cityOffset.length; i++) { index = cityOffset[i]; if (document.getElementById('DST'+i).checked){index++} zoneDate = new Date(); zoneDate.setHours(index+zoneDate.getHours()+zoneDate.getTimezoneOffset()/60); update(i); } setTimeout("dispClocks()",60000); } onload=dispClocks; </script> <style type="text/css"> <!-- .style1 { color: #FFFFFF } --> </style> </head> <body> <table border='0' align='right' cellpadding='5' cellspacing='0'> <tfoot> <tr> <td colspan='20' align='center' class="style1" id='localMsg'> </td> </tr> </tfoot> <tbody> <tr> <td><strong>Los Angeles</strong> </td> <td id='localDay' align='center'> </td> <td align='center' id='localDate'> </td> <td align='center' id='localTime'> </td> <td align='center' class="style1" id='dispDST'> </td> <td><strong>New York</strong> </td> <td id='cityDay1' align='center'> </td> <td id='cityDate1' align='center'> </td> <td id='cityTime1' align='center'> </td> <td align='center' class="style1"><input type=hidden 'checkbox' disabled id='DST1' onClick="dispClocks()" checked> </td> <td><strong>London</strong></td> <td id='cityDay2' align='center'> </td> <td id='cityDate2' align='center'> </td> <td id='cityTime2' align='center'> </td> <td align='center' class="style1"><input type=hidden 'checkbox' id='DST2' onClick="dispClocks()" disabled> </td> <td><strong>Tokyo</strong></td> <td id='cityDay3' align='center'> </td> <td id='cityDate3' align='center'> </td> <td id='cityTime3' align='center'> </td> <td align='center' class="style1"><input type=hidden 'checkbox' id='DST3' onClick="dispClocks()" disabled> </td> </tr> </tbody> </table> </html> Code (markup):