Hello,
I have a clock at the top left corner [URL removed]
I’d like to make it interactive and synchronized with a clock on a PC. Can I just do it with a CSS? Or what would be the best method to use?
Thanks.
I’m not sure how you expect to make a static image interactive, but either way you will need to use JavaScript to make an interactive clock.
To be honest, the clock image is so small, I doubt anyone would notice whether or not it’s telling the right time.
1 Like
No you’d need some JS to get the initial time but from then on CSS could animate it.
There are plenty of examples around like this one where you could have the background image of your clock image (without hands) and then overlay the hands with css. You could even draw the image of your clock in css as it looks a pretty simple design (basically some thick borders on three elements would do).
3 Likes
There are CSS-only techniques for showing the clock time, with no JS at all.
You could have the server set it up with a starting time for when the page was served, so that it remains consistently accurate when people reload the page.
5 Likes
Nice example 
Yes the examples I mentioned will also work without JS but there needs some programming logic to set the initial time whether you do that with php or JS etc…
There is no way for CSS to know the time on its own was what I was getting at
6 Likes
I had some spare time so I took a go at styling the clock face in CSS.
I based the CSS for the hand movement loosely on the codepen example @Paul_Wilkins posted but I noticed there was a bug in that example where the hours and minutes jumped at the end of the revolution back to their initial rotated start position.
Instead of trying to start the hands at the current time by rotating them we should instead start the minutes and hours at 00:00 and then set a negative animation delay in seconds to match the number of seconds that have passed since zero to equal the current time. A negative delay in the animation does the opposite to what you think and is the same as if the animation had been running that length of time. This stops the animation jumping back to an offset start position at the end of its cycle.
I used my limited knowledge of JS to set a CSS variable (custom properties) to the current delay that we need for the time to be set (hopefully @Paul_Wilkins can tidy it up and check its doing what I think its doing ).
If a server side language was used then you just need to set the css variables in the root element to the appropriate duration.
Finally I’m not sure how reliable CSS timings will be and it may be necessary to use JS to get the real time every hour and update if there is a difference.
6 Likes
Agree with You.
Just want to add some features
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.