Kevin Powell - Community•5d ago

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.

9 Replies

Chris Bolson•5d ago

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 clearInterval() 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•5d ago

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)

13eck•5d ago

You want to be careful about using 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 .innerHTML. For something like this you want to use .innerText instead. You're not passing an HTML string so you're causing the JS engine to parse plain text.

Alex•5d ago

@13eck.c All good points. I was basing my code off @Myra's initial example, but you're right, it should be .innerText. 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•5d ago

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

13eck.dev

CodePen

Clock

...

13eck•5d ago

Also, I didn't look at the OP's pen, just saw yours and did a bit of fiddling I only messed with the JS, and added comments that I hope explain why I did what I did

Alex•5d ago

I knew there was something like .toLocaleTimeString() out there but couldn't find it immediately. Never even heard of requestAnimationFrame() before, that's blowing my brain a bit. Thanks!

13eck•5d ago

RAF is mostly used for games, as that's how you get delta time for the main game loop. But it's useful for this, too! It's one of my favourite under-used functions And you can add an options object to the .toLocaleTimeString(undefined, opts) call to change how the time is displayed.

MyraOP•4d ago

Thanks!@Chris Bolson I understand your points Thanks! @Alex for highlighting the points Thanks! @13eck This was the new approach i have learnt

Gaming

Programming

Digital clock

Did you find this page helpful?