3 Clocks Displaying 3 Different Times

danny_woo · 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>

Sign In

3 Clocks Displaying 3 Different Times

Recommended Posts

danny_woo

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information