源代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload=function(){
setInterval(draw,1000);
}
function draw(){
var oDate=new Date();
var oHour=oDate.getHours();
var oMin=oDate.getMinutes();
var oSec=oDate.getSeconds();
var oHourValue=(-90+oHour*30)*Math.PI/180;
var oMinValue=(-90+oMin*6)*Math.PI/180;
var oSecValue=(-90+oSec*6)*Math.PI/180;
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.clearRect(0,0,200,200);
context.beginPath();
for(var i=0;i<=60;i++){
context.moveTo(200,200);
context.arc(200,200,150,6*i*Math.PI/180,6*(1+i)*Math.PI/180);
}
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(200,200);
context.arc(200,200,150*19/20,0,360*Math.PI/180);
context.closePath();
context.fillStyle="white";
context.fill();
context.beginPath();
for(var i=0;i<=12;i++){
context.moveTo(200,200);
context.arc(200,200,150,30*i*Math.PI/180,30*(1+i)*Math.PI/180);
}
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(200,200);
context.arc(200,200,150*18/20,0,360*Math.PI/180);
context.closePath();
context.fillStyle="white";
context.fill();
context.beginPath();
context.moveTo(200,200);
context.arc(200,200,150*13/20,oMinValue,oMinValue);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(200,200);
context.arc(200,200,150*17/20,oSecValue,oSecValue);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(200,200);
context.arc(200,200,150*8/20,oHourValue,oHourValue);
context.closePath();
context.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>