Multi clock shown

Question

I want to show two clocks, currently only one shows:

              <script type="text/javascript">
var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

function GetClock(){
var d=new Date();
var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear();
if(nyear<1000) nyear+=1900;

var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds();
if(nmin<=9) nmin="0"+nmin
if(nsec<=9) nsec="0"+nsec;

document.getElementById('clockbox').innerHTML=" "+ndate+" "+tmonth[nmonth]+" "+nyear+", "+nhour+":"+nmin+":"+nsec+"";
}

window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>

<div id="clockbox"></div>, <script type="text/javascript" src="js/rs-clock.js"></script>

The script for the second clock (rs-clock.js) is the following:

function startTime() {
    var today=new Date();
    var h=today.getUTCHours();
    var m=today.getUTCMinutes();
    var s=today.getUTCSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('rs-clock').innerHTML = h+":"+m+":"+s;
    var t = setTimeout(function(){startTime()},500);
}

function checkTime(i) {
    if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}

Must I make both into .js and add it then, if yes how would I do that?

Where is the HTML element for the second clock? – putvande Feb 04 '16 at 13:52 — putvande, Feb 04 '16 at 13:52
The second is Javascript based. – Korkel Feb 04 '16 at 14:13 — Korkel, Feb 04 '16 at 14:13

Spencer May · Accepted Answer · 2016-02-04T14:40:56.017

1

There are a few problems with your current solution if you want more than one clock to appear. Each element needs to have it's own instance, and each element needs to be a unique object under a variable. To do this I would recommend giving the clocks a class name and then running a for loop over these to set the main time function. Lastly, because it is a clock I would recommend using setInterval instead of setTimeout so that you can be sure it runs every second. This in turn of course can easily be changed to add days, months, etc for one particular instance using an if statement on i

//make sure this is in some kind of onload function
elems = document.getElementsByClassName("clocks");
for (var i = 0; i < elems.length; i++) {
    (function(i) { //this puts each set interval in its own unique instance
        var temptime = elems[i]; //save the clock variable in this instance
        setInterval(function() {
            var today=new Date();
            var h=today.getUTCHours();
            var m=today.getUTCMinutes();
            var s=today.getUTCSeconds();
            m = checkTime(m);
            s = checkTime(s);
            temptime.innerHTML = h+":"+m+":"+s;
        }, 1000);
    }(i));
}

a working jsfiddle: https://jsfiddle.net/krz2feqd/

I took your first clock and implemented it into this loop under the unique instance of 0. Here is a jsfiddle for that: https://jsfiddle.net/pbp5scuL/

edited Feb 04 '16 at 14:40

answered Feb 04 '16 at 14:28

Spencer May

3,644
8
26
46

But will it work for a system-based clock (what now shows) and a GMT clock? – Korkel Feb 04 '16 at 14:41
@Korkel yes. It can be configured to work with anything under the `Date()` object. Check out the second jsfiddle I posted for an example of that. – Spencer May Feb 04 '16 at 14:43
@Korkel to set to a specific timezone use `setUTCDate` or `setUTCHours`. Read on these here: http://www.w3schools.com/jsref/jsref_setutchours.asp and http://www.w3schools.com/jsref/jsref_setutcdate.asp – Spencer May Feb 04 '16 at 14:52
Okay and must I add it to my html file or in a js? – Korkel Feb 04 '16 at 14:54
@Korkel this can go under a script tag in your html, or in an included js file. It doesn't matter as long as you have the function running under an onload function. http://stackoverflow.com/questions/4842590/run-function-when-page-is-loaded – Spencer May Feb 04 '16 at 14:57
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/102609/discussion-between-korkel-and-spencer-may). – Korkel Feb 04 '16 at 14:59

Multi clock shown

1 Answers1