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!

Nat1Craft • Sep 23 • Edited

First off, great work! Love the cleverness of it all and the styling. Learned alot. Thanks for designing and posting this.

Second, I know this is an older post but figured I would point this out anyway. It looks like there is a small flaw in the minute/hourly animations. The animation for the minute hand (and hour) move NOT at the top of the minute (or hour), but they move dependent upon when you loaded/refreshed the page. Meaning? If you load/refresh the page at 10:05:17 then the minute hand will not move until 10:06:17 when it should have moved at 10:06:00. The same holds true for the hour hand.

Luckily the fix is simple. Just change the UpdateClock function to determine the proper offsets. There are two places below that need to be changed. First, calcuate the animation offsets. Second, make a tweak to the existing code that set the offsets, but use them directly (there was some fuzzy addition here previously)

updateClock() {
        const time = new Date();
        const tzOffset = parseFloat(this.getAttribute('timezone') || '0');

        // Convert to UTC first, then add timezone offset
        const utc = time.getTime() + (time.getTimezoneOffset() * 60000);
        const tzTime = new Date(utc + (3600000 * tzOffset));

        // FIRST: The animation offset it cumulative!
        const secs = -tzTime.getSeconds();
        const mins = -60 * tzTime.getMinutes() + secs;
        const hour = -3600 * (tzTime.getHours() % 12) + mins;

        // Update date display
        this.#date.textContent = this.#formatDate(tzTime);

        // SECOND: Use the animation offsets directly
        this.style.setProperty('--_dh', `${(hour)}s`);
        this.style.setProperty('--_dm', `${mins}s`);
        this.style.setProperty('--_ds', `${secs}s`);
}

Mads Stoumann • Sep 23

Great finding, thank you!

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

Shaktijeet Sahoo • Feb 26

Holy CSS!

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".

Keith Murimi • Feb 27

This is timeless CSS at it's best

Mads Stoumann • Feb 27

Thank you!

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!

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!

Ștefan Vîlce • Feb 27

Awesome!!! Excellent!

Mads Stoumann • Feb 27

Thank you!!