如何用css3和js绘制一个带完整代码的动态时钟

用css3和js绘制动态时钟是前端入门阶段非常实用的实践项目，既能熟悉css3的变形属性用法，也能掌握js时间对象的处理逻辑，最终实现的效果可以实时显示当前时间，指针会跟随时间动态转动。

实现思路梳理

整个动态时钟的实现可以分为三个核心部分：首先是搭建时钟的基础HTML结构，包含时钟圆盘和时、分、秒三个指针；其次是用css3设置时钟的样式，包括圆盘布局、指针初始位置和旋转中心点；最后是用js获取当前时间，计算三个指针对应的旋转角度，并且设置定时器每秒更新一次角度，实现动态效果。

HTML结构搭建

时钟的基础结构需要一个外层的圆盘容器，内部放置三个指针元素，同时可以给圆盘添加刻度标记提升视觉效果。具体代码如下：

<div class="clock-container">
  <div class="clock-face">
    <!-- 刻度标记 -->
    <div class="mark mark-1"></div>
    <div class="mark mark-2"></div>
    <div class="mark mark-3"></div>
    <div class="mark mark-4"></div>
    <div class="mark mark-5"></div>
    <div class="mark mark-6"></div>
    <div class="mark mark-7"></div>
    <div class="mark mark-8"></div>
    <div class="mark mark-9"></div>
    <div class="mark mark-10"></div>
    <div class="mark mark-11"></div>
    <div class="mark mark-12"></div>
    <!-- 时钟指针 -->
    <div class="hand hour-hand"></div>
    <div class="hand minute-hand"></div>
    <div class="hand second-hand"></div>
    <!-- 中心点 -->
    <div class="center-dot"></div>
  </div>
</div>

CSS3样式设计

样式部分需要设置时钟圆盘为圆形，指针通过transform-origin属性设置旋转中心点为底部中心，这样指针旋转时会围绕圆盘中心转动。具体样式代码如下：

/* 时钟容器样式 */
.clock-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

/* 时钟圆盘样式 */
.clock-face {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #fff;
  border: 10px solid #333;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* 刻度通用样式 */
.mark {
  position: absolute;
  width: 4px;
  height: 20px;
  background-color: #333;
  left: 50%;
  top: 10px;
  transform-origin: 50% 140px;
}

/* 12个刻度位置设置 */
.mark-1 { transform: rotate(30deg); }
.mark-2 { transform: rotate(60deg); }
.mark-3 { transform: rotate(90deg); }
.mark-4 { transform: rotate(120deg); }
.mark-5 { transform: rotate(150deg); }
.mark-6 { transform: rotate(180deg); }
.mark-7 { transform: rotate(210deg); }
.mark-8 { transform: rotate(240deg); }
.mark-9 { transform: rotate(270deg); }
.mark-10 { transform: rotate(300deg); }
.mark-11 { transform: rotate(330deg); }
.mark-12 { transform: rotate(0deg); }

/* 指针通用样式 */
.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  border-radius: 4px;
}

/* 时针样式 */
.hour-hand {
  width: 8px;
  height: 80px;
  background-color: #333;
  margin-left: -4px;
}

/* 分针样式 */
.minute-hand {
  width: 6px;
  height: 110px;
  background-color: #666;
  margin-left: -3px;
}

/* 秒针样式 */
.second-hand {
  width: 2px;
  height: 130px;
  background-color: #f00;
  margin-left: -1px;
}

/* 中心点样式 */
.center-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #333;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

JS逻辑编写

JS部分需要获取当前的时间，分别计算时、分、秒对应的旋转角度，然后通过定时器每秒更新一次指针的角度。具体逻辑代码如下：

// 获取三个指针的DOM元素
const hourHand = document.querySelector('.hour-hand');
const minuteHand = document.querySelector('.minute-hand');
const secondHand = document.querySelector('.second-hand');

// 更新时钟指针的函数
function updateClock() {
  // 获取当前时间
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  // 计算各指针的旋转角度
  // 秒针：每秒转6度（360/60）
  const secondsDeg = ((seconds / 60) * 360) + 90;
  // 分针：每分钟转6度，加上秒数带来的额外角度
  const minutesDeg = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 90;
  // 时针：每小时转30度（360/12），加上分钟带来的额外角度
  const hoursDeg = ((hours % 12) / 12) * 360 + ((minutes / 60) * 30) + 90;

  // 设置指针的旋转角度
  secondHand.style.transform = `rotate(${secondsDeg}deg)`;
  minuteHand.style.transform = `rotate(${minutesDeg}deg)`;
  hourHand.style.transform = `rotate(${hoursDeg}deg)`;
}

// 初始调用一次，避免页面加载时指针初始位置停留
updateClock();
// 设置定时器，每秒更新一次时钟
setInterval(updateClock, 1000);

运行效果说明

将以上三部分代码放在同一个HTML文件中，用浏览器打开就可以看到实时运行的动态时钟。秒针每秒转动6度，分针每分钟转动6度同时跟随秒针有微小偏移，时针每小时转动30度同时跟随分钟有微小偏移，整体效果流畅自然。如果需要调整时钟的大小，只需要修改.clock-face的宽度和高度属性，同时对应调整刻度的transform-origin的Y轴数值即可。

css3js动态时钟前端动画修改时间：2026-07-10 11:00:31