HTML5 时钟

最新推荐文章于 2025-07-08 13:52:08 发布

原创最新推荐文章于 2025-07-08 13:52:08 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

博主在完成HTML5作业之余制作了一个简单的时钟，通过代码分享，供读者参考学习，旨在不断进步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这几天写HTML5作业，做网页做恶心了闲暇时间做了个时钟玩玩，代码需要的可以自取，不能说有多么精妙，但只有不断进步才是最好。

<!doctype html>

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="500" height="500" >
您的浏览器不支持canvas标签，无法看到时钟
</canvas>
<script>
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");

function drawClock(){
cxt.clearRect(0,0,500,500);
var now=new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();
hour=hour+min/60;
hour=hour>12?hour-12:hour;

cxt.beginPath();
cxt.lineWidth=5;
cxt.strokeStyle="blue";
cxt.arc(250,250,200,0,2*Math.PI,false);
cxt.stroke();
cxt.closePath();

for(var i=0;i<12;i++){
cxt.beginPath();
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth=5;
cxt.translate(250,250);
cxt.rotate(i*30*Math.PI/180);
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.restore();
cxt.closePath();
}

for(var i=0;i<60;i++){
cxt.beginPath();
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth=3;
cxt.translate(250,250);
cxt.rotate(i*6*Math.PI/180);
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.restore();
cxt.closePath();
}

cxt.beginPath();
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth=5;
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180);
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.stroke();
cxt.restore();
cxt.closePath();

cxt.beginPath();
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth=3;
cxt.translate(250,250);
cxt.rotate(min*6*Math.PI/180);
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.stroke();
cxt.restore();
cxt.closePath();

cxt.beginPath();
cxt.save();
cxt.strokeStyle="red";
cxt.lineWidth=1.5;
cxt.translate(250,250);
cxt.rotate(sec*6*Math.PI/180);
cxt.moveTo(0,-168);
cxt.lineTo(0,20);
cxt.stroke();
cxt.restore();
cxt.closePath();

cxt.beginPath();
cxt.strokeStyle="red";
cxt.fillStyle="#bbb";
cxt.lineWidth=2;
cxt.arc(250,250,5,0,2*Math.PI,false);
cxt.stroke();
cxt.fill();
cxt.restore();
cxt.closePath();

cxt.beginPath();
cxt.save();
cxt.strokeStyle="red";
cxt.lineWidth=2;
cxt.translate(250,250);
cxt.rotate(sec*6*Math.PI/180);
cxt.arc(0,-150,5,0,2*Math.PI,false);
cxt.stroke();
cxt.fill();
cxt.restore();
cxt.closePath();

cxt.beginPath();
cxt.fillStyle="red";
cxt.font="30px 楷体"
cxt.fillText("焦作时间",200,320);
cxt.closePath();
}
setInterval(drawClock,1000)

</script>
</body>
</html>