<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.shaxiangift.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.sxdscyy.com/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁白色的HTML5时钟代码</title>
</head>
<body>
<center><canvasid="canid" class='canid'></canvas></center>
<script>
var canid=document.getElementById('canid');
var ct=canid.getContext('2d');
canid.width=600;
canid.height=600;
// canid.style.border='1px solid #bbb';
ct.beginPath();
setInterval(function(){
ct.clearRect(0,0,canid.width,canid.height);
ct.beginPath();
ct.arc(250,250,200,0*(Math.PI/180),360*(Math.PI/180));
// 只有弧度
ct.strokeStyle='#aaa';
ct.stroke();
// ct.fillText(json[0].title,0,0);
ct.beginPath();
var tangleR=0;
for(var i=0;i<360;i++){
varx;var y;
ct.beginPath();
ct.moveTo(250,250);
x=250+Math.cos(tangleR*Math.PI / 180 ) * (200);
y=250+Math.sin(tangleR*Math.PI / 180 ) * (200);
tangleR++;
ct.strokeStyle='#ccc';
//console.log(x,y);
ct.lineTo(x,y);
ct.stroke();
}
ct.beginPath();
ct.arc(250,250,190,0*(Math.PI/180),360*(Math.PI/180));
ct.fillStyle='white';
ct.fill();
ct.beginPath();
var tangle=0;
for(var i=0;i<60;i++){
varx;var y;
ct.beginPath();
ct.moveTo(250,250);
x=250+Math.cos(tangle*Math.PI / 180 ) * (200);
y=250+Math.sin(tangle*Math.PI / 180 ) * (200);
/*弧度上的x,y坐标*/
tangle+=6;
ct.strokeStyle='#aaa';
//console.log(x,y);
ct.lineTo(x,y);
ct.stroke();
}
ct.beginPath();
ct.arc(250,250,180,0*(Math.PI/180),360*(Math.PI/180));
ct.fillStyle='white';
ct.fill();
var tangleRR=-60;
for(var i=0;i<12;i++){
ct.beginPath();
varx;var y;
//ct.moveTo(250,250);
x=250+Math.cos(tangleRR*Math.PI / 180 ) * (200-50);
y=250+Math.sin(tangleRR*Math.PI / 180 ) * (200-50);
tangleRR+=30;
console.log(x,y,""+(i+1));
//ct.lineTo(x,y);
//ct.stroke();
ct.fillStyle='#aaa'
ct.fillText(""+(i+1),x,y);
ct.fill();
ct.textAlign='center';
}
ct.beginPath();
ct.arc(250,250,5,0*(Math.PI/180),360*(Math.PI/180));
ct.stroke();
ct.fill();
vartime=new Date();
varh=time.getHours();
varm=time.getMinutes();
vars=time.getSeconds();
varmj=m*6+(s/60)*6-90;
varsj=s*6-90;
varhj=h*30+(m/60)*30+(s/3600)*30-90;
x0=250+Math.cos(hj*Math.PI / 180 ) * (200-120);
x1=250+Math.cos(mj*Math.PI / 180 ) * (200-100);
x2=250+Math.cos(sj*Math.PI / 180 ) * (200-60);
y0=250+Math.sin(hj*Math.PI / 180 ) * (200-120);
y1=250+Math.sin(mj*Math.PI / 180 ) * (200-100);
y2=250+Math.sin(sj*Math.PI / 180 ) * (200-60);
ct.beginPath();
ct.moveTo(250,250);
ct.lineTo(x0,y0);
ct.stroke();
ct.beginPath();
ct.moveTo(250,250);
ct.lineTo(x1,y1);
ct.stroke();
ct.beginPath();
ct.moveTo(250,250);
ct.lineTo(x2,y2);
ct.stroke();
},1000);
</script>
<div style="text-align:center;margin:-50px0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源:<a href="http://down.admin5.com/"target="_blank"> </a></p>
</div>
</body>
</html>
联系客服