html中的时钟如何自动,时钟.html

时钟

body{background:#42426F;}

#c1{background:white;}

span{color:white;}

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

function toDraw(){

var x = 200;

var y = 200;

var r = 150;

oGC.clearRect(0,0,oC.width,oC.height);

//获取时间

var oDate = new Date();

var oHours = oDate.getHours();

var oMin = oDate.getMinutes();

var oSen = oDate.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;

var osen2Value = oSenValue+Math.PI;

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 = 5;

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);

oGC.closePath();

oGC.stroke();

//分针

oGC.lineWidth = 3;

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*15/20,oMinValue,oMinValue,false);

oGC.closePath();

oGC.stroke();

//秒针

oGC.lineWidth = 1;

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*17/20,oSenValue,oSenValue,false);

oGC.closePath();

oGC.stroke();

oGC.lineWidth = 1;

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*5/20,osen2Value,osen2Value,false);

oGC.closePath();

oGC.stroke();

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*1/20,0,2*Math.PI,false);

oGC.fillStyle='black';

oGC.closePath();

oGC.fill();

}

setInterval(toDraw,1000);

toDraw();

};

不支持canvas浏览器