当前位置：首页 > JavaScript

js钟表实现

2026-04-03 20:31:28JavaScript

JavaScript 钟表实现方法

基础钟表实现

使用 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 旋转实现指针动画：

function updateAnalogClock() {
  const now = new Date();
  const seconds = now.getSeconds();
  const minutes = now.getMinutes();
  const hours = now.getHours() % 12;

  const secondDeg = seconds * 6;
  const minuteDeg = (minutes + seconds/60) * 6;
  const hourDeg = (hours + minutes/60) * 30;

  document.getElementById('second-hand').style.transform = `rotate(${secondDeg}deg)`;
  document.getElementById('minute-hand').style.transform = `rotate(${minuteDeg}deg)`;
  document.getElementById('hour-hand').style.transform = `rotate(${hourDeg}deg)`;
}

setInterval(updateAnalogClock, 1000);
updateAnalogClock();

对应 HTML 结构：

<div class="clock-face">
  <div id="hour-hand" class="hand hour"></div>
  <div id="minute-hand" class="hand minute"></div>
  <div id="second-hand" class="hand second"></div>
</div>

性能优化版本

使用 requestAnimationFrame 实现更流畅的动画：

let lastTime = 0;
function smoothUpdate(timestamp) {
  if (!lastTime || timestamp - lastTime >= 1000) {
    updateClock();
    lastTime = timestamp;
  }
  requestAnimationFrame(smoothUpdate);
}
requestAnimationFrame(smoothUpdate);

世界时钟实现

添加时区支持：

js钟表实现

function getWorldTime(timezone) {
  return new Date().toLocaleTimeString('en-US', {
    timeZone: timezone,
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
}