当前位置：首页 > JavaScript

js实现钟

2026-03-15 08:04:59JavaScript

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

基础时钟实现

使用Date对象获取当前时间并更新DOM元素：

js实现钟

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样式和时钟分隔符动画：

// HTML需包含<div id="clock"><span class="hours"></span>:<span class="minutes"></span>:<span class="seconds"></span></div>
function updateStyledClock() {
  const now = new Date();
  document.querySelector('.hours').textContent = now.getHours().toString().padStart(2, '0');
  document.querySelector('.minutes').textContent = now.getMinutes().toString().padStart(2, '0');
  document.querySelector('.seconds').textContent = now.getSeconds().toString().padStart(2, '0');
}

模拟时钟（表盘式）

使用Canvas绘制表盘和指针：

js实现钟

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

function drawClock() {
  const radius = canvas.width / 2;
  ctx.clearRect(0, 0, canvas.width, canvas.height);

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

  // 绘制时针、分针、秒针
  const now = new Date();
  drawHand(ctx, radius, (now.getHours() % 12) * 30 + now.getMinutes() * 0.5, 50, 6, '#333');
  drawHand(ctx, radius, now.getMinutes() * 6, 70, 4, '#666');
  drawHand(ctx, radius, now.getSeconds() * 6, 90, 2, '#f00');
}

function drawHand(ctx, center, angle, length, width, color) {
  angle = (angle - 90) * Math.PI / 180;
  ctx.beginPath();
  ctx.moveTo(center, center);
  ctx.lineTo(center + Math.cos(angle) * length, center + Math.sin(angle) * length);
  ctx.strokeStyle = color;
  ctx.lineWidth = width;
  ctx.stroke();
}

setInterval(drawClock, 1000);
drawClock();

性能优化版本

使用requestAnimationFrame实现平滑动画：

let lastTimestamp = 0;

function smoothClock(timestamp) {
  if (timestamp - lastTimestamp >= 1000) {
    updateClock(); // 使用基础版的updateClock函数
    lastTimestamp = timestamp;
  }
  requestAnimationFrame(smoothClock);
}

requestAnimationFrame(smoothClock);

以上实现可根据需求选择：