Sort of Clock using setInterval

Question

I'm a multimedia student who has been learning Javascript.

This morning I had the idea of trying to make a clock. Yes I know it's been done 24/7 on this forum, but not like I want it,

The thing I want: When you load the page, the clock starts at 00:00:00 (not at current time). and then every second comes by etc etc.

The code I got so far:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>Teller</title>
        <link rel="stylesheet" href="style.css">
        <script>
            var seconde;
            var minute;
            var hour;

            function ClockLoader() {
                seconde = setInterval(ClockTicker, 1000);
                minute = setInterval(ClockTicker, 60000);
                hour = setInterval(ClockTicker, 3600000);
            }
            function ClockTicker() {
                var nummer = document.getElementById("secondeClock").innerHTML;
                var nieuwNummer = document.getElementById("secondeClock").innerHTML + 1;
                document.getElementById("secondeClock").innerHTML = nummer.replace(nieuwNummer, "");

            }

            function stopTheClock() {
              clearInterval(seconde);
            }

            function startTheClock() {
                seconde = setInterval(ClockTicker, 1000);
                minuut = setInterval(ClockTicker, 60000);
                uur = setInterval(ClockTicker, 3600000);
            }
        </script>
    </head>

    <body onload="ClockLoader(); ClockTicker();">
        <div class="clock" id="hourClock">0</div>
        <div class="clock" id="minuteClock">0</div>
        <div class="clock" id="secondeClock">0</div>
        <button onclick="startTheClock();">Start</button>
        <br>
        <button onclick="stopTheClock();">Stop</button>
    </body>
</html>

I hope what I'm asking won't take much of your time, Thank you in advance!

I'm sure *all* variants of clocks have already been covered on this site :-) Maybe they're difficult to find by search. — Bergi, Sep 12 '14 at 13:40
Why not a single second timer, incrementing a counter then: [JavaScript seconds to time with format hh:mm:ss](http://stackoverflow.com/questions/6312993/javascript-seconds-to-time-with-format-hhmmss) — Alex K., Sep 12 '14 at 13:40
What is wrong with your script? It seems to do exactly what you asked for (and btw, it's called a "count-up" not a "clock") — Bergi, Sep 12 '14 at 13:42

Brendan · Answer 1 · 2014-09-12T14:01:26.433

To go along with Alex K's comment, a single setInterval would work fine.

var sec=0,min=0,hour=0;
window.onload=function start() {
    setInterval(test,1000);
}
function test() {
    sec++;
    if(sec==60){
        sec=0;
        min++;
    }
    if(min==60){
        min=0;
        hour++
    }


}

Since setInterval(test,1000) is set in miliseconds, and 1000 miliseconds = 1 second, we just add one every time the test function is called. When 60 seconds is up, we set minute to 1 and reset the second counter. When minutes reaches 60, we set the hour to one and so on and so forth. If you are planning on making a 24 hour clock or 12 hour clock, I recommend still using this counter but also using this:

var d = new Date(); 
initialhour=d.getHours(); 
initialminute=d.getMinutes(); 
initialsecond=d.getSeconds();

and then use the setInterval to modify those variables up. Perhaps use another variable so the above is only used once? Hope this Helps!

FIX: Define the variables outside the start() function.

score 0 · Answer 2 · answered Sep 12 '14 at 13:53

I don't know exactly what you tried to do in your ClockTicker function, but it doesn't do anything useful. Maybe try something like this:

var nummer = document.getElementById("secondeClock").innerHTML;
var nieuwNummer = ++nummer;
document.getElementById("secondeClock").innerHTML = nieuwNummer;

Sort of Clock using setInterval

2 Answers2