http://5227788.cn/static/time.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background: #131115;}
#c1{background: #fbf7fe;}
</style>
<script>
window.onload=function(){
var oC=document.getElementById('c1');
var oGC=oC.getContext('2d');
setInterval(toDraw,1000);
function toDraw(){
var x=200;
var y=200;
var r=150;
oGC.clearRect(0, 0, oC.width,oC.height);
var oDte=new Date();
var oHours=oDte.getHours();
var oMin=oDte.getMinutes();
var oSen=oDte.getSeconds();
var oHoursValue=(-90+oHours*30+oMin/2)*Math.PI/180;
var oMinValue=(-90+oMin*6)*Math.PI/180;
var oSenValue=(-90+oSen*6)*Math.PI/180;
oGC.beginPath();
for(var i=0; i<60; i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle='white';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oGC.lineWidth=3;
oGC.beginPath();
for(var i=0; i<12; i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle='white';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oGC.lineWidth=3;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*9/20,oMinValue,oMinValue,false);
oGC.closePath();
oGC.stroke();
oGC.lineWidth=1;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*14/20,oSenValue,oSenValue,false);
oGC.closePath();
oGC.stroke();
oGC.lineWidth=4;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*6/20,oHoursValue,oHoursValue,false);
oGC.closePath();
oGC.stroke();
}
}
</script>
</head>
<body>
<canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
<span>不支持camvas浏览器</span>
</canvas>
</body>
</html>