Web Gadgets: And Another JavaScript Clock!

One of the first programs I wrote when I learnt JavaScript was a digital clock.

Then, just last month, I wrote an analogue clock, with the hands all made up of periods.

And now, behold! Yet another JavaScript clock. This time, the hands are not made of lousy dots -- they're real hands now, drawn with two of the latest CSS features: transform and transition.

For Google Chrome and Apple Safari users, you should already be able to see hands slowly move between ticks, instead of "teleporting" from location to location. The same goes to Opera users, although some minor bugs may be observed.

Again, for Firefox users, upgrade to version 4.0 or later (4.0 beta currently, at http://www.mozilla.com/en-US/firefox/beta/) to see what you've been missing. Seriously, Version 4.0 is good. Those who prefer to stay with earlier versions will still see a functioning clock with "teleporting" hands though.

Sadly, for Internet Explorer users, this clock doesn't work. You'll have to wait for IE9 to try your luck, sorry about that.

Here goes the source code, for those who are curious. Remember, Blogger.com does NOT support JavaScript at blog bodies, so use a proper HTML/JavaScript gadget for the clock.

<style type="text/css">
.dot {position:absolute;font-weight:bold;}
#sechand {position:absolute;top:80px;left:40px;width:70px;border:1px dashed;transform: rotate(-90deg) translate(35px,0px);-moz-transform: rotate(-90deg) translate(35px,0px);-webkit-transform: rotate(-90deg) translate(35px,0px);-o-transform: rotate(-90deg) translate(35px,0px);}
#minhand,#hrhand {position:absolute;left:40px;top:80px;width:70px;transform: rotate(-90deg) translate(35px,-1px);-moz-transform: rotate(-90deg) translate(35px,0px);-webkit-transform: rotate(-90deg) translate(35px,-1px);-o-transform: rotate(-90deg) translate(35px,-1px);}
#minhand {border:2px solid;}
</style>

<div style="position:relative;margin-left:auto;margin-right:auto;width:160px;height:170px;" id="labelcontainer">
<hr id="sechand" />
<hr id="minhand" />
<div id="hrhand" /><hr style="width:50px;border:2px solid;position:relative;right:10px;" /></div></div>
<span id="debug"></span>

<script type="text/javascript">
for (var i=0;i!=13;i++)
{
document.getElementById('labelcontainer').innerHTML+="<span class='dot' style='top:"+y_coor(i*5,75,74)+"px;left:"+x_coor(i*5,75,74)+"px;'>."+"</span>"
}
upd_sec();
upd_min();

function upd_sec()
{
var now=new Date();
setTimeout('upd_sec()',1000-now.valueOf()%1000);
var angle=now.getSeconds()*6-90;
if (now.getSeconds()==59)
setTimeout('sec0()',800);
document.getElementById("sechand").setAttribute("style","\
transition-duration:0.75s;\
-moz-transition-duration:0.75s;\
-webkit-transition-duration:0.75s;\
-o-transition-duration:0.75s;\
transform: rotate("+angle+"deg) translate(35px,0px);\
-moz-transform: rotate("+angle+"deg) translate(35px,0px);\
-webkit-transform: rotate("+angle+"deg) translate(35px,0px);\
-o-transform: rotate("+angle+"deg) translate(35px,0px);");
}

function upd_min()
{
var now=new Date();
setTimeout('upd_min()',60000-now.valueOf()%60000);
if (now.getMinutes()==59)
setTimeout('min0()',850);
var angle=now.getMinutes()*6-90;
document.getElementById("minhand").setAttribute("style","\
transition-duration:0.75s;\
-moz-transition-duration:0.75s;\
-webkit-transition-duration:0.75s;\
-o-transition-duration:0.75s;\
transform: rotate("+angle+"deg) translate(35px,-1px);\
-moz-transform: rotate("+angle+"deg) translate(35px,0px);\
-webkit-transform: rotate("+angle+"deg) translate(35px,-1px);\
-o-transform: rotate("+angle+"deg) translate(35px,-1px);");
angle=now.getHours()*30+now.getMinutes()/2-90;
document.getElementById("hrhand").setAttribute("style","\
transform: rotate("+angle+"deg) translate(35px,-1px);\
-moz-transform: rotate("+angle+"deg) translate(35px,0px);\
-webkit-transform: rotate("+angle+"deg) translate(35px,-1px);\
-o-transform: rotate("+angle+"deg) translate(35px,-1px);");
}

function sec0()
{
document.getElementById("sechand").setAttribute("style","\
transition-property: none;\
-moz-transition-property: none;\
-webkit-transition-property: none;\
-o-transition-property: none;\
transform: rotate(-96deg) translate(35px,0px);\
-moz-transform: rotate(-96deg) translate(35px,0px);\
-webkit-transform: rotate(-96deg) translate(35px,0px);\
-o-transform: rotate(-96deg) translate(35px,0px);");
}

function min0()
{
document.getElementById("minhand").setAttribute("style","\
transition-property: none;\
-moz-transition-property: none;\
-webkit-transition-property: none;\
-o-transition-property: none;\
transform: rotate(-96deg) translate(35px,-1px);\
-moz-transform: rotate(-96deg) translate(35px,0px);\
-webkit-transform: rotate(-96deg) translate(35px,-1px);\
-o-transform: rotate(-96deg) translate(35px,-1px);");
}

function x_coor(sec,radius,offset)
{
return (Math.sin(sec*0.10472)*radius+offset);
}

function y_coor(sec,radius,offset)
{
return (offset-Math.cos(sec*0.10472)*radius);
}
</script>