js实现数字时钟

2026-04-04 13:41:52JavaScript

数字时钟的实现方法

使用JavaScript实现数字时钟可以通过以下步骤完成：

HTML结构

js实现数字时钟

<div id="clock"></div>

CSS样式

#clock {
  font-family: 'Arial', sans-serif;
  font-size: 48px;
  text-align: center;
  margin: 20px;
  color: #333;
}

JavaScript代码

js实现数字时钟

function updateClock() {
  const clockElement = document.getElementById('clock');
  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');

  clockElement.textContent = `${hours}:${minutes}:${seconds}`;
}

// 初始调用
updateClock();

// 每秒更新一次
setInterval(updateClock, 1000);

功能扩展

添加日期显示

function updateClock() {
  const clockElement = document.getElementById('clock');
  const now = new Date();

  const year = now.getFullYear();
  const month = (now.getMonth() + 1).toString().padStart(2, '0');
  const day = now.getDate().toString().padStart(2, '0');

  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');

  clockElement.textContent = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

12小时制显示

function updateClock() {
  const clockElement = document.getElementById('clock');
  const now = new Date();

  let hours = now.getHours();
  const ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12; // 将0转换为12

  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');

  clockElement.textContent = `${hours}:${minutes}:${seconds} ${ampm}`;
}

注意事项

确保在DOM加载完成后执行JavaScript代码，可以将代码放在window.onload事件中或放在</body>标签前
使用padStart(2, '0')确保数字始终显示两位，如9显示为09
清除定时器可以使用clearInterval，当不再需要时钟更新时释放资源

完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    #clock {
      font-family: 'Arial', sans-serif;
      font-size: 48px;
      text-align: center;
      margin: 20px;
      color: #333;
    }
  </style>
</head>
<body>
  <div id="clock"></div>

  <script>
    window.onload = function() {
      function updateClock() {
        const clockElement = document.getElementById('clock');
        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');

        clockElement.textContent = `${hours}:${minutes}:${seconds}`;
      }

      updateClock();
      setInterval(updateClock, 1000);
    };
  </script>
</body>
</html>