Unique Real time analogue clock

 

Clockwise

It shows the real time of your computer; just check it!

The movement of the hour hand, minute hand and seconds' hand are controlled by parametric equations. The second hand moves 6⁰ every second.

 

The Source Code for Live Analogue Clock

Here is the source code for the animation. It is JavaScript.

 

<script type="text/javascript" >
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var k;
function timing() {
//get date
var tme= new Date();
//get seconds
var s=tme.getSeconds();
//get minutes
var m=tme.getMinutes();
//get hours
var h=tme.getHours();
context.clearRect(0,0,500,500);
//seconds
context.beginPath();
context.arc(250,250,100,-Math.PI/2,[s*Math.PI/30]-Math.PI/2)
context.strokeStyle='red';
context.lineWidth=6;
context.stroke();
context.beginPath();
context.arc(250,250,70,-Math.PI/2,[m*Math.PI/30]-Math.PI/2)
context.strokeStyle='blue';
context.lineWidth=10;
context.stroke();
if(h<=12)
{
context.beginPath();
context.arc(250,250,40,-Math.PI/2,[(h)*Math.PI/6]-Math.PI/2)
context.strokeStyle='brown';
context.lineWidth=14;
context.stroke();
}
else
{
context.beginPath();
context.arc(250,250,40,-Math.PI/2,[(h-12)*Math.PI/6]-Math.PI/2)
context.strokeStyle='brown';
context.lineWidth=14;
context.stroke();
}
}
window.setInterval('timing()', 1000);
</script>