目录
1. 效果图
2. 思路分析
2.1 目标
2.2 关键点
3. 代码实现
3.1 html部分
3.2 css部分
3.3 js代码
3.4 完整代码
4. 总结
1. 效果图
下图展示了一个带有背景图片（表盘）的时钟，并在表盘上动态显示时针、分针和秒针。这些指针会根据当前的时间每秒更新一次，模拟真实时钟的行为。
2. 思路分析
2.1 目标
要实现一个带表盘、时针、分针、秒针位置的正确布局，且模拟真实时钟的行为。
2.2 关键点
(1) 要确保时针、分针和秒针能够根据当前时间准确地旋转到正确的位置
(2) 特别需要注意的是时针不仅受小时影响，还受分钟影响（即每分钟时针也会微小移动）
3. 代码实现
接下来我会一步一步解说每段关键代码的含义。
3.1 html部分
<div class="box"><div class="bell"><img src="./images/hour.png" alt="" class="hourl"><img src="./images/minute.png" alt="" class="minl"><img src="./images/second.png" alt="" class="secondl"></div></div>.box是最外层盒子，.bell是表创建一个包含时钟表盘和指针的容器，里面的三张图片分别对应时、分、秒。
3.2 css部分
*{margin: 0;padding: 0;}.box{width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;}.bell{width: 600px;height: 600px;background: url('./images/clock.jpg');position: relative;}.bell>img{position: absolute;left: 50%;margin-left: -15px;}(1) 给最外层盒子 .box 设置弹性布局，主轴及交叉轴居中，使时钟在页面居中显示。
(2) 给 .bell 设置相对定位，方便时、分、秒图片排列。
(3) 调整时、分、秒图片的位置，使之在表盘居中排列。
3.3 js代码
// 获取元素var hourl = document.querySelector('.hourl');var minl = document.querySelector('.minl');var secondl = document.querySelector('.secondl');获取时、分、秒图片Dom元素。
setInterval(function(){// 获取时分秒var time = new Date();var hour = time.getHours() % 12; // 6var min = time.getMinutes();var second = time.getSeconds();// 计算角度var hourDeg = (hour * 30) + (min * 0.5); var minDeg = min * 6; var secondDeg = second * 6; // 秒针每秒6°secondl.style.transform='rotate'+'('+secondDeg+'deg'+')';minl.style.transform='rotate'+'('+minDeg+'deg'+')';hourl.style.transform='rotate'+'('+hourDeg+'deg'+')';},1000);注意：
(1) 每小时30° 分针对时针也有影响，分针每走一分钟，时针移动0.5
(2) 分针每分钟走6°
(3) 秒针每秒6°
知道了时、分、秒的旋转度数之后，将定时器的时间间隔设置为 1000 毫秒（即 1 秒），以匹配秒针的更新频率。在每次更新时，修改指针的 transform 属性即可。
3.4 完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>时钟</title><style>*{margin: 0;padding: 0;}.box{width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;}.bell{width: 600px;height: 600px;background: url('./images/clock.jpg');position: relative;}.bell>img{position: absolute;left: 50%;margin-left: -15px;}</style>
</head>
<body><div class="box"><div class="bell"><img src="./images/hour.png" alt="" class="hourl"><img src="./images/minute.png" alt="" class="minl"><img src="./images/second.png" alt="" class="secondl"></div></div><script>// 获取元素var hourl = document.querySelector('.hourl');var minl = document.querySelector('.minl');var secondl = document.querySelector('.secondl');setInterval(function(){// 获取时分秒var time = new Date();var hour = time.getHours() % 12; var min = time.getMinutes();var second = time.getSeconds();// 计算角度var hourDeg = (hour * 30) + (min * 0.5); var minDeg = min * 6; var secondDeg = second * 6; secondl.style.transform='rotate'+'('+secondDeg+'deg'+')';minl.style.transform='rotate'+'('+minDeg+'deg'+')';hourl.style.transform='rotate'+'('+hourDeg+'deg'+')';console.log(hour + ' ' + min + ' ' + second);},1000);</script>
</body>
</html>
4. 总结
以上内容解释了如何精确计算指针的旋转角度、以及确保指针图片的中心对齐。最后实现了视觉效果良好的动态时钟。时、分、秒以及表盘的图片资源放在了下方，如有需要可点击下载，也可私信问我要。
动态时钟图片资源
更多前端动效点击下方链接↓ ↓ ↓
前端动效_借来一夜星光的博客-CSDN博客
如果以上内容对你有帮助，请点赞收藏一下吧😀。
