五步实现JavaScript HTML5动态时钟：CSS3动画与DOM操作详解
本文详细讲解如何利用HTML5、CSS3和JavaScript制作动态时钟。通过五步流程，涵盖CSS3旋转动画、DOM节点操作、定时器应用及圆周坐标计算。重点解析指针角度算法与数字定位偏移修正，提供完整代码示例，帮助开发者掌握前端动态效果实现技巧。
HTML5动态时钟制作概述
在掌握HTML、CSS和JavaScript基础后，本文将演示如何制作一个视觉效果出色的动态时钟。首先展示最终效果预览图：
本教程涉及的核心技术点包括：CSS3动画效果、DOM节点操作、定时器机制以及圆周坐标计算（这部分数学知识可能已被遗忘，但无需担心）。接下来，我们将通过五个步骤来完成制作。
构建HTML结构
第一步：构建HTML结构
首先，需要搭建HTML的基本骨架，包括背景层、表盘容器、指针元素（分别对应时针、分针、秒针）以及数字显示区域。
<div id="clock">
<div class="bg">
<div class="point">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
<div class="circle"></div>
</div>
</div>
< /div>
编写CSS样式与旋转设置
第二步：编写CSS样式
定义指针的颜色与尺寸。需要特别说明的是，使用 `transform: rotate(-90deg);` 将指针初始旋转90度，使其从12点方向开始；同时通过 `transform-origin: 0 6px;` 设置旋转的中心点坐标，确保指针围绕正确轴心转动。
<style>
*{
margin: 0;
padding: 0;
}
#clock{
margin: 5% auto;
width: 400px;
height: 400px;
border-radius: 10px;
background: #aaa;
position: relative;
transform: rotate(-90deg);
}
#clock .bg{
width: 360px;
height: 360px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -180px;
margin-top: -180px;
}
#clock .point{
position: absolute;
left: 50%;
top: 50%;
margin-left: -14px;
margin-top: -14px;
}
#clock #hour{
width: 80px;
height: 16px;
background: #000;
margin: 6px 0 0 14px;
/*transform: rotate(30deg);*/
transform-origin:0 8px;
/*animation: hour 3s linear 100!* alternate*!;*/
border-radius: 16px;
}
#clock #minute{
width: 120px;
height: 12px;
background: #000;
margin: -14px 0 0 14px;
transform-origin:0 6px;
border-radius: 12px;
}
#clock #second{
width: 160px;
height: 6px;
background: #f00;
margin: -9px 0 0 14px;
transform-origin:0 3px;
border-radius: 6px;
}
#clock .point .circle{
width: 28px;
height: 28px;
border-radius: 50%;
background: #000;
position: absolute;
left: 0;
top: 0;
}
@keyframes hour {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#clock .number{
position: absolute;
font-size: 34px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
transform: rotate(90deg);
}
< /style>
计算指针位置与转动逻辑
第三步：计算指针位置
JavaScript利用Date对象获取当前系统时间，分别通过 `getHours()`、`getMinutes()` 和 `getSeconds()` 获取时、分、秒数值。时针转动一周对应12个大格，因此每格角度为 `360°/12`；分针和秒针转动一周对应60个小格，每格角度为 `360°/60`。
function clock(){
var date = new Date();//获取当前时间
//时(0-23) 分(0-59)秒(0-59)
//计算转动角度
var hourDeg = date.getHours()*360/12;
var minuteDeg = date.getMinutes()*360/60;
var secondDeg = date.getSeconds()*360/60;
//console.log(hourDeg, minuteDeg, secondDeg);
//设置指针
hour.style.transform = 'rotate('+hourDeg+'deg)';
minute.style.transform = 'rotate('+minuteDeg+'deg)';
second.style.transform = 'rotate('+secondDeg+'deg)';
}
第四步：实现时钟转动逻辑
使用 `setInterval` 设置定时器，实现每秒刷新一次界面。需要注意的是，必须在定时器启动前手动执行一次初始化函数，否则用户需等待1秒才能看到初始状态，影响体验。
//初始化执行一次
clock();
setInterval(clock,1000);
绘制数字时间与坐标计算
第五步：绘制数字时间
数字同样分布在圆周上，关键在于确定半径并计算对应坐标。通过数学公式定位每个数字的位置，具体圆坐标系计算规则如下：
* 圆半径坐标计算公式： * x = pointX + r * cos(angle); * y = pointY + r * sin(angle); 需要注意的是，上述公式计算的是圆弧上点的坐标。在CSS定位时，默认以元素的左上角为基准点，这会导致数字中心偏离圆弧。解决方法是将计算出的坐标 `(x, y)` 向左上平移元素宽高的一半（即 `x - w/2`, `y - h/2`），从而使数字的中心点准确落在圆弧上。
var pointX = 200;
var pointY = 200;
var r = 150;
function drawNumber(){
var deg = Math.PI*2/12;//360°
for (var i = 1; i <= 12; i++) {
//计算每格的角度
var angle = deg*i;
//计算圆上的坐标
var x = pointX + r*Math.cos(angle);
var y = pointY + r*Math.sin(angle);
//创建div,写入数字
var number = document.createElement('div');
number.className = 'number';
number.innerHTML = i;
//减去自身的一半, 让div的中心点在圆弧上
number.style.left = x - 25 + 'px';
number.style.top = y - 25 + 'px';
//添加到页面
myClock.appendChild(number);
}
}
完整的JavaScript代码实现如下：
<script>
/***
* 时钟:
* 1> 旋转: rotate(90deg)
* 2> 旋转中心点: transform-origin
* */
//TODO step1: 获取时钟的指针
var hour = document.getElementById('hour');//时针
var minute = document.getElementById('minute');//分针
var second = document.getElementById('second');//秒针
var myClock = document.getElementById('clock');//时钟
//TODO step2: 获取当前时间,把指针放在正确的位置
function clock(){
var date = new Date();//获取当前时间
//时(0-23) 分(0-59)秒(0-59)
//计算转动角度
var hourDeg = date.getHours()*360/12;
var minuteDeg = date.getMinutes()*360/60;
var secondDeg = date.getSeconds()*360/60;
//console.log(hourDeg, minuteDeg, secondDeg);
//设置指针
hour.style.transform = 'rotate('+hourDeg+'deg)';
minute.style.transform = 'rotate('+minuteDeg+'deg)';
second.style.transform = 'rotate('+secondDeg+'deg)';
}
//初始化执行一次
clock();
//TODO step3: 设置定时器
setInterval(clock,1000);
/***
* 圆半径坐标计算：
* x = pointX + r*cos(angle);
* y = pointY + r*sin(angle);
* */
var pointX = 200;
var pointY = 200;
var r = 150;
//TODO step4: 画时钟数字
function drawNumber(){
var deg = Math.PI*2/12;//360°
for (var i = 1; i <= 12; i++) {
//计算每格的角度
var angle = deg*i;
//计算圆上的坐标
var x = pointX + r*Math.cos(angle);
var y = pointY + r*Math.sin(angle);
//创建div,写入数字
var number = document.createElement('div');
number.className = 'number';
number.innerHTML = i;
//减去自身的一半, 让div的中心点在圆弧上
number.style.left = x - 25 + 'px';
number.style.top = y - 25 + 'px';
//添加到页面
myClock.appendChild(number);
}
}
drawNumber();
< /script>
通过以上步骤，你是否已经掌握了制作方法？
如需查看更多JavaScript时钟特效，请访问：JavaScript时钟特效专题。
以上就是本文的全部内容，希望能为你的学习提供有益帮助，也欢迎大家继续支持本站。
JS怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载？前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系：Web前端三件套怎么协作
2026-11-04 15:41:40