HTML5时钟代码

最新推荐文章于 2024-08-01 16:15:33 发布

lihong1191

最新推荐文章于 2024-08-01 16:15:33 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/lihong1191/article/details/47907393

版权

这个示例展示了如何使用HTML5的canvas标签创建一个实时更新的时钟。通过JavaScript获取当前时间，并在canvas上绘制时钟的时、分、秒指针，以及刻度。代码包括了清除画布、绘制表盘、刻度、时针、分针和秒针的逻辑，并使用setInterval函数实现秒针每秒更新一次，使时钟保持动态效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html >
<html >
<head>
<title>HTML5智能时钟</title>
</head>

<body>
<canvas id="clock" width="500" height="500">
您的浏览器不支持canvas标签，请更换浏览器
</canvas>
<script>
var clock=document.getElementById('clock');
var cxt=clock.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;
//将24小时进制转换成12小时进制
//18:12:56
hour=hour>12?(hour-12):hour;

//表盘（蓝色）
cxt.lineWidth=10;
cxt.strokeStyle="blue";
cxt.beginPath();
cxt.arc(250,250,200,0,260,false);