danny_woo Posted March 23, 2012 Share Posted March 23, 2012 Hi guys, Please can some one help me out here! I'm slowly going crazy. I'm new to java script, but I'm sure there is a way to do this. I have some code for a digital clock and all is well and good with it. No problems. However I need to repeat or modify this code two more times, so I have a total of 3 working digital clocks on one webpage. In addition to this I need the other two clocks to display different times. So for example, the 1st clock is set to New York time, the 2nd clock is set to London time and the 3rd clock is set to Hong Kong time. I think this can be done with offsetting the time, but I'm not sure where to put the command and how to write it to my code properly. Also when I try to add a second clock, the first one disappears! I know there is also another way of doing this with php, if anyone has the time to change this code to php I'll be very grateful, if not please can someone tell me where I'm going wrong in JavaScript. Hope someone can help me out, Cheers people, here's the code: <head> <title>Slowly Going Insain</title> <style type="text/css"> .clockStyle{ background-color:#FFF; padding:5px; color:#F00; font-family:"Times New Roman", Times, serif; font-size:10px; font-weight:normal; letter-spacing: 2px; display:inline; } </style> </head> <body> <h2>Global Time...</h2><br/> <table width="380" cellspacing="2" cellpadding="2"> <tr> <th width="35%" align="left" valign="top" scope="col">London</th> <th width="34%" scope="col">New York</th> <th scope="col">Hong Kong</th> </tr> <tr> <td height="20" align="left" valign="top"><div id="clockDisplay" class="clockStyle"></div></td> <td align="left" valign="top"> </td> <td align="left" valign="top"> </td> </tr> </table> <script type="text/javascript" language="javascript"> function renderTime(){ var currentTime = new Date() var diem = "AM"; var h = currentTime.getUTCHours(); var m = currentTime.getUTCMinutes(); var s = currentTime.getUTCSeconds(); if (h == 0) { h = 12; } else if (h > 12) { h = h - 12; diem = "PM"; } if (h < 10) { h = "0" + h; } if (m < 10) { m = "0" + m; } if (s < 10) { s = "0" + s; } var myClock = document.getElementById('clockDisplay'); myClock.textContent = h + ":" + m + ":" + s + " " + diem; myClock.innerText = h + ":" + m + ":" + s + " " + diem; setTimeout('renderTime()',1000); } renderTime(); </script> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/259543-3-clocks-displaying-3-different-times/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.