Very nice indeed. Technically you should be able to do the same thing in CSS... I knocked this together in 20 minutes as a proof of concept: http://codepen.io/onion2k/details/kmouK
Sadly you'd need some JS to set them to the right time though, which rather ruins the beauty of it. I think. If anyone knows a way to do it without JS I'd love to hear how.
I made a star chart, which is kind of like a clock in the form of a map of the sky, in pure HTML/CSS, that starts at the correct current time without resorting to JS:
For extreme impracticality, you could have server-side generated CSS which outputs the right CSS values depending on what time it's requested. Then no JS is required.
If by 'handles' you mean hands, what I built does that with CSS3's animation and transformations. No JS necessary. It's setting the initial positions that's the problem - CSS has no clock functionality.
The only non-JS solution is to tell people to only load the page at exactly 12:00:00, but that's a bit impractical.
That's actually a lazy-developer-only-bothered-with-the-webkit-animation-class issue rather than a Firefox issue. Adding keyframes, moz-keyframes, and o-keyframes would make it cross-browser.
Reminds me of something an early web-server software development company Roxen did for one of their clients, a watch manufacturer, circa 1995/6.
Basically they were rendering an animated gif on the server and streaming to the browser, so that the watch told the correct time, but the hands appeared behind the glass of the photo-realistic watch.
This was when most sites (not that there were many!) only had rudimentary static graphics, with the odd flashing "under construction' sign.
I googled, but couldn't find any reference to it, although Roxen the company still seems to be going, with the Roxen Web Server having become a CMS platform.
Clock 19 shows the incorrect time for me, but it's the one I'm most interested in using. I'm diving in to the code right now, but I'm struggling to understand the math on lines 57-60 of the SVG:
//smooth-out the rotation of the hour hand: rotate 0.008333333 of a degree every second
hour_rotate_angle = ((30*tDate.getHours())-90)+(0.008333333*((tDate.getMinutes()*60)+tDate.getSeconds()));
hour_hand.setAttribute("transform", "rotate("+hour_rotate_angle+",50,50)");
hour_hand_shadow.setAttribute("transform", "rotate("+hour_rotate_angle+",50,50)");
360/0.008333333 is 43,200.
43,200 seconds equates to only 12 hours, so I'm wondering if this clock is off because it's missing 12 hours out of the day. If I half the coefficient 0.008333333 to 0.004166666, does that make it correct...
I think I just ironed out my struggle. I'm posting this before I know the result... I hope the suspense is killing you all.
Figured it out. This particular clock only uses the hour hand, but because it's a 24-hour clock, the math required is different. It looks like this snippet of code was reused from the others (12-hour clocks). The design was updated to 24-hour, but the math for the hour hand wasn't. Fortunately, the math for a 24-hour clock is simple:
360 degrees divided by the number of seconds in 24-hours (86400) gives you your rotation value: 0.004166666 degrees of rotation per second.
Now all you need to know is the number of seconds that have elapsed for the current time:
You are going to be disappointed in my answer: I can't remember what I was thinking :)
I only dug out these clocks over the weekend and tweaked the home page a bit before posting it here. I haven't touched the actual Javascript or svg in over 5 yrs!
I initially posted them so they could be used with iGoogle gadgets (remember those?)
The original clocks where hosted on Google sites (just to show their age :)) https://sites.google.com/site/clockamatics/
If I had to guess, that magic number is some sort of compensator to smooth out the animation, but I honestly don't remember...should be a lesson for why code should be well documented:)
Another downside is that it's confusing all day long. I have yet to see such clock somewhere else than US television. And to be honest, I don't see a point of such clock-face.
TIL one can embed javascript in SVG. Can it be used to do more than just changing the positions and rotations of objects already defined in the file? (In other words, could someone write Space Invaders entirely in SVG?)
I noticed when it updates the second hand (this is present on most clocks). The hand moves and appears very blocking for several frames until anti-aliasing kicks in.
It appears to happen on FF only. I have Chrome and it is smooth....might reflect a regression on the part of FF because I actually did these ports about 5 yrs ago and don't remember the lagging in the past.
consider it creative commons...in other words do with it as you please...The original SVGs were created for linux desktop and I believe they were GPL, I only added Javascript to make it browser friendly.
Oh god, I coded my first xml clock in 2002 very similar to #1. I even had the first web page completely done in SVG. The whole index.html was a nicely done svg tag with a sidebar and links with plenty of transparencies and rounded corners.
Sadly you'd need some JS to set them to the right time though, which rather ruins the beauty of it. I think. If anyone knows a way to do it without JS I'd love to hear how.