当前位置：首页 > JavaScript

js实现钟表

2026-04-06 21:31:43JavaScript

以下是一个使用JavaScript实现动态钟表的完整方案，包含HTML、CSS和JavaScript代码：

HTML结构

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

CSS样式

.clock {
  width: 300px;
  height: 300px;
  border: 20px solid #333;
  border-radius: 50%;
  margin: 50px auto;
  position: relative;
  padding: 2rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-3px);
}

.hand {
  width: 50%;
  height: 6px;
  background: #000;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.hour-hand {
  width: 30%;
  left: 20%;
  height: 8px;
  background: #555;
}

.min-hand {
  width: 40%;
  left: 10%;
  height: 6px;
  background: #777;
}

.second-hand {
  height: 3px;
  background: red;
}

JavaScript逻辑

function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  document.querySelector('.second-hand').style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
  document.querySelector('.min-hand').style.transform = `rotate(${minsDegrees}deg)`;

  const hour = now.getHours();
  const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
  document.querySelector('.hour-hand').style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(setDate, 1000);
setDate(); // 立即执行一次避免初始延迟

实现原理

时钟通过获取当前时间的小时、分钟和秒数，转换为对应的旋转角度。秒针每分钟旋转360度，分针每小时旋转360度，时针每12小时旋转360度。

transform-origin属性设置为100%使得指针围绕钟表中心旋转。transition属性添加了平滑的动画效果，cubic-bezier函数创造了秒针的弹性效果。

扩展功能

要添加时钟刻度，可以在HTML中添加：

<div class="clock">
  <!-- 原有内容 -->
  <div class="mark mark-12"></div>
  <div class="mark mark-3"></div>
  <div class="mark mark-6"></div>
  <div class="mark mark-9"></div>
</div>

对应CSS：

js实现钟表

.mark {
  position: absolute;
  width: 3px;
  height: 15px;
  background: #333;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.mark-12 { transform: translateX(-50%) rotate(0deg); }
.mark-3 { transform: translateX(-50%) rotate(90deg); top: 50%; left: 100%; }
.mark-6 { transform: translateX(-50%) rotate(180deg); top: 100%; }
.mark-9 { transform: translateX(-50%) rotate(270deg); top: 50%; left: 0; }

这个实现方案包含了完整的钟表功能，指针会实时更新，并且具有平滑的动画效果。可以根据需要调整尺寸、颜色和样式来定制外观。