Html5代码实现动态时钟

以下是一个简单的HTML5动态时钟实现，使用了JavaScript来更新时间，并利用了Canvas API来绘制时钟的表盘和指针。




<!DOCTYPE html>
<html>
<head>
<title>Dynamic Clock</title>
<style>
  canvas {
    border:1px solid #000;
    margin: 0 auto;
    display: block;
  }
</style>
</head>
<body onload="startClock()">
<canvas id="clock" width="400" height="400"></canvas>
<script>
function startClock() {
  var canvas = document.getElementById('clock');
  var ctx = canvas.getContext('2d');
  var radius = canvas.height / 2;
 
  ctx.translate(radius, radius); // 移动到中心
 
  // 绘制表盘
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
 
  // 绘制时针、分针、秒针
  setInterval(drawClock, 1000);
 
  function drawClock() {
    drawHands(new Date());
  }
 
  function drawHands(date) {
    var sec = date.getSeconds();
    var min = date.getMinutes();
    var hr = date.getHours();
    hr = hr >= 12 ? hr - 12 : hr;
 
    ctx.beginPath();
 
    // 清除之前的指针
    ctx.clearRect(-radius, -radius, 2*radius, 2*radius);
 
    // 秒针
    ctx.rotate(sec * (2 * Math.PI) / 60);
    ctx.lineWidth = 2;
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -radius * 0.9);
    ctx.stroke();
 
    // 分针
    ctx.rotate((min + sec / 60) * (2 * Math.PI) / 60);
    ctx.lineWidth = 5;
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -radius * 0.8);
    ctx.stroke();
 
    // 时针
    ctx.rotate((hr + min / 60) * (2 * Math.PI) / 12);
    ctx.lineWidth = 8;
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -radius * 0.7);
    ctx.stroke();
  }
}
</script>
</body>
</html>

这段代码首先定义了一个startClock函数，它会在页面加载时执行。这个函数获取canvas元素并设置上下文，计算表盘半径，并将坐标系移动到中心。然后，它开始一个定时器，每秒钟调用drawClock函数，后者又调用drawHands函数，后者根据当前时间绘制时针、分针和秒针。这个实现使用了Canvas的旋转特性来绘制指针，每秒钟旋转一次，并清除之前的指针。

Html5代码实现动态时钟

评论已关闭

推荐阅读