Skip to content

DEV Community

Clocks and Watches in CSS

Mads Stoumann on February 25, 2025

A couple of years ago, when CSS trigonometry functions became baseline, I wrote an article about them. One of the examples I did, was a CSS-only an...

Read full post

crosschainer • Feb 26

sick

artydev • Feb 25 • Edited

Awesome, thank you ;-)

Mads Stoumann • Feb 25

Thanks!

Shaktijeet Sahoo • Feb 26

Holy CSS!

StanTheMan70 • Mar 20

Thank you! This is awesome! However, there's a small issue causing the script to work incorrectly with fractional time zones. For example, when the timezone is set to +9.5, the clock displays the time half an hour earlier than it should.
To fix this, simply replace parseInt with** parseFloat** when retrieving the timezone value from the element attribute. This will ensure that fractional offsets are handled correctly.
This error exists even in the CDN.

Mads Stoumann • Mar 20 • Edited

Ah, didn't think about that — thanks for letting me know!
I've added this method, so it rounds the timezone to nearest quarter of an hour:

#roundTzOffset(offset) {
  return Math.round((parseFloat(offset) || 0) * 4) / 4
};

And since you're called StanTheMan70 — here's Stan The Man and me, 25 years ago ;-)

StanTheMan70 • Mar 21

plutonium239 • Feb 27

Nice, but you can just name the variable --d without the underscore, neater.

Mads Stoumann • Feb 27

That's to indicate the variable should be considerend "private".

Ezpie • Feb 28

next I want an overly complicated button made using only CSS. Now that's a keeper

Théo Marceau • Mar 6

🕖

Madhurima Rawat • Feb 26

This looks so good🌟Thanks for sharing!

Mads Stoumann • Feb 26

Thanks!

José Santos Silva • Feb 27

Great work thanks.

Mads Stoumann • Feb 27

Thanks!

Michael Phillips • Feb 26

So nice!

Mads Stoumann • Feb 26

Thanks!

MilesWK • Feb 26

Wow! Very interesting! Clocks are hard! Thanks for sharing!

Mads Stoumann • Feb 27

Thank you!

GoogliEyes8 • Feb 27

Noice, The clock is so smooth, thanks for sharing

Mads Stoumann • Feb 27

Thank you!

zoujia • Feb 27

COOL👍MARK❤

Mads Stoumann • Feb 27

Thanks!

Mahdi Jazini • Feb 27

Good Job !

Mads Stoumann • Feb 27

Thanks!

SAMIR HEMBROM • Feb 27

Absolutely amazing

Mads Stoumann • Feb 27

Thanks!

Muhaymin Bin Mehmood • Feb 27

Great, It seems awesome 🙌

Mads Stoumann • Feb 27

Thanks!

Keith Murimi • Feb 27

This is timeless CSS at it's best

Mads Stoumann • Feb 27

Thank you!

Ștefan Vîlce • Feb 27

Awesome!!! Excellent!

Mads Stoumann • Feb 27

Thank you!!

Stephen Samra • Feb 28

This is so cool, thanks for sharing.

Mads Stoumann • Feb 28

Thanks!

Buecui Salos • Mar 6

good quilt

UpGrow • Feb 26

Very good!

Mads Stoumann • Feb 27

Thanks!

Yuriy K. • Feb 28

Great article, thanks.
Always knew that trigonometry is cool ))

Mads Stoumann • Feb 28

Yeah, it is!