当前位置：首页 > JavaScript

js实现钟

2026-02-02 08:11:22JavaScript

以下是使用JavaScript实现一个动态时钟的几种方法，涵盖基础实现和进阶优化：

基础时钟实现

使用new Date()获取当前时间，并通过setInterval动态更新：

function updateClock() {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
}

setInterval(updateClock, 1000);
updateClock(); // 立即执行一次避免初始空白

带样式的数字时钟

添加CSS样式增强视觉效果：

<style>
  #clock {
    font-family: 'Arial', sans-serif;
    font-size: 3em;
    color: #333;
    text-align: center;
    padding: 20px;
    background: #f0f0f0;
    border-radius: 10px;
    display: inline-block;
  }
</style>
<div id="clock"></div>

模拟时钟实现

使用Canvas绘制表盘和指针：

js实现钟

const canvas = document.getElementById('clockCanvas');
const ctx = canvas.getContext('2d');
const radius = canvas.height / 2;

function drawClock() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const now = new Date();
  const hour = now.getHours() % 12;
  const minute = now.getMinutes();
  const second = now.getSeconds();

  // 绘制表盘
  ctx.beginPath();
  ctx.arc(radius, radius, radius - 10, 0, 2 * Math.PI);
  ctx.strokeStyle = '#333';
  ctx.lineWidth = 8;
  ctx.stroke();

  // 绘制时针
  drawHand(hour * 30 + minute * 0.5, radius * 0.5, 8);

  // 绘制分针
  drawHand(minute * 6, radius * 0.7, 4);

  // 绘制秒针
  drawHand(second * 6, radius * 0.9, 2);
}

function drawHand(angle, length, width) {
  const radian = (angle - 90) * Math.PI / 180;
  ctx.beginPath();
  ctx.moveTo(radius, radius);
  ctx.lineTo(
    radius + Math.cos(radian) * length,
    radius + Math.sin(radian) * length
  );
  ctx.strokeStyle = width === 2 ? 'red' : '#333';
  ctx.lineWidth = width;
  ctx.stroke();
}

setInterval(drawClock, 1000);
drawClock();