So, I am old and thus like ANALOG clocks.
I am also annoyed by the use of “am” and “pm” suffixes and prefer what is called “navy Time” in the US…
Thus, liking the SVG format because it does scale well and is lightweight, I made a 24 hour clock-face in Inkscape.
Next I found a simple 6 line JS that will do the animation…
At the time of writing the result was embedded int the site sidebar as custom html and worked nicely.
Because I am not sure if it will stay there in the future I will include it on this post as well.
Because the function in the sidebar would collide with the target clockface on this post… some variables have been renamed between the two instances. Otherwise ONE of the two clocks would stop moving while viewing this page 😉
Â
<script type="text/javascript" charset="UTF-8">
setInterval(function() {
function r4D(el, deg) {
el.setAttribute( 'transform', 'rotate('+ deg +' 205 211)')
}
var d = new Date()
r4D(gSecondH4D, 6*d.getSeconds())
r4D(gMinuteH4D, 6*d.getMinutes())
r4D(gHourH4D, 15*(d.getHours()))
}, 1000)
</script>
Please note that this JS had 3 separate functions to rotate each hand. (During testing that allowed me to use different pivot points because my SVG was not clean. In the final version only ONE version is required and can be called by all 3 calculations.
Please note that for my 24 hour clock to work the hour hand rotates only 15deg per hour AND the original modulo 12 operation to make the hour ambiguous is not required. I have also removed the addition of a portion of 15 deg for the minutes because I want the hour hand to point to the hour until it jumps…