Digital clock

Hello! I'm trying to create a digital clock but there are a few issues in it

• the first one is that the seconds kept going from 1 to infinity to stop that i have put a condition to stop the seconds at 60 but after 60 they aren't starting from 1 when the page refreshes than it happens

• also the minutes are not updating when 60sec are completing
e.g: at 10:28:60 the minutes should be updated to 29 and seconds should start from 1 all this happens when page refreshes

let intervalId = setInterval(() => {
         // console.log(seconds++);
         timePara.innerHTML= `${hours}   :   ${minutes}   :     ${seconds++}   `;
         if (seconds === 61){
                     clearInterval(intervalId);
                 }
     }, 1000);
 }

let intervalId = setInterval(() => {
         // console.log(seconds++);
         timePara.innerHTML= `${hours}   :   ${minutes}   :     ${seconds++}   `;
         if (seconds === 61){
                     clearInterval(intervalId);
                 }
     }, 1000);
 }

here is the link to code https://github.com/Myragull/Digital-Clock

and live at
https://myragull.github.io/Digital-Clock/

GitHub

GitHub - Myragull/Digital-Clock

Contribute to Myragull/Digital-Clock development by creating an account on GitHub.

Chris Bolson•3/26/25, 7:24 PM

There may be a specific reason as to why you are doing it this way but, in my experience, most clocks get the time every second (or minimum unit of time of the clock). That way you don't have to do any calculations based on number of seconds or anything.

... but after 60 they aren't starting from 1 when the page refreshes than it happens

When you call you are stopping the interval so the clock is stopping.

at 10:28:60 the minutes should be updated to 29 and seconds

I can't see anything in your code which would increase the minutes (or hours) when the seconds reach 60.

Alex•3/26/25, 10:10 PM

Yeah instead of calculating the time once and then adding a second every second, do it all inside your displayTime function and run that via setInterval, like this: https://codepen.io/Beanie127/pen/KwKxzya. This also lets you update the clock more regularly, so it can be more accurate to the second, if that's something that matters for your application (although if you care about accuracy to the millisecond, this probably isn't the ideal way to track time lol)

AAlex Yeah instead of calculating the time once and then adding a second every second,...

13eck•3/26/25, 11:47 PM

You want to be careful about using

setInterval

setInterval

. It's asynchrnous, therefore the interval you set is the minimum time between intervals. It's not a specific interval. If the main thread is busy doing something else it can lag.

Also, your codepen is using . For something like this you want to use instead. You're not passing an HTML string so you're causing the JS engine to parse plain text.

Alex•3/27/25, 12:02 AM

@13eck.c All good points. I was basing my code off @Myra's initial example, but you're right, it should be . What would be your approach to timing it, given the challenge and assuming that it's important for the clock to be second-perfect?

13eck•3/27/25, 12:10 AM

My solution: https://codepen.io/13eck/pen/LEYJZMG

CodePen13eck.dev

Clock

...