The Website: Link
So I made a clock. At first I was trying to code it via React but couldn't find the way to create infinite loop that would start after page initial render - React was spamming error messages in the console if using useEffect
and it wasn't even allowing page to load if using recursive function.
And I used recursive function in common HTML project. Luckily it worked and it wasn't too difficult do code a clock hands. In few words, recursive function was just checking every 1/10s current system time and setting angle for the hands using simple formula:
angle = 360 / marks_num * time_value
where marks_num
is the number of current hand's marks (for hours it's 12, for minutes and seconds it's 60)
We also have to make out hands to move smoothly (optional for seconds) so we also add the current state of lower time dimensions.
For hours it's:
minutes / 60 + seconds / 3600
For minutes it's:
seconds / 60 + milliseconds / 60000
So as the result it looks like this:
document.querySelector('.h-hand').style.transform = "rotate("+30*(now.getHours()+now.getMinutes()/60+now.getSeconds()/3600)+"deg)"
document.querySelector('.m-hand').style.transform = "rotate("+6*(now.getMinutes()+now.getSeconds()/60+now.getMilliseconds()/60000)+"deg)"
document.querySelector('.s-hand').style.transform = "rotate("+6*(now.getSeconds())+"deg)"
The Full Code
GitHub: Link
Top comments (1)
Bruh. You totally read my HN comment! 😂🤣 You even copied my first sentence!
Looks good! 👍😄
Some comments have been hidden by the post's author - find out more