本文分享了使用 JavaScript 实现动态钟表效果的完整代码。通过操作 DOM 元素，利用 setInterval 定时更新时针、分针和秒针的旋转角度，结合 CSS 定位与背景图片，实现了逼真的时钟显示效果。
JavaScript 动态钟表实现
本文分享了一段使用 JavaScript 实现动态钟表效果的完整代码示例，供读者参考学习。
<!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>Document</title>
<style>
.clock {
width: 600px;
height: 600px;
margin: 100px auto;
background: url(/image/shizhong.jpg) 600px/600px;
position: relative;
}
.clock .h {
width: 100%;
height: 100%;
background: url(/image/时针.jpg) no-repeat center center;
background-size: 35px;
z-index: 1;
position: absolute;
left: -3px;
top: -60px;
}
.clock .m {
width: 100%;
height: 100%;
background: url(/image/分针.jpg) no-repeat center center;
background-size: 35px;
z-index: 2;
position: absolute;
left: -3px;
top: -95px;
}
.clock .s {
width: 100%;
height: 100%;
background: url(/image/秒针.jpg) no-repeat center center;
background-size: 25px;
z-index: 3;
position: absolute;
left: -3px;
top: -95px;
}
</style>
</head>
<body>
<div class="clock">
<div class="h" id="hour"></div>
<div class="m" id="min"></div>
<div class="s" id="second"></div>
</div>
</body>
<script>
var h = document.querySelector(".h")
var m = document.querySelector(".m")
var s = document.querySelector(".s")
var s = m = h = ms = 0;
setInterval(function () {
var date = new Date()
ms = date.getMilliseconds()/* 现在的毫秒 */
s = date.getSeconds() + ms / 1000;
m = date.getMinutes() + s / 60;
h = date.getHours() % 12 + m / 60;
/*秒针一圈360度 一共60秒 每秒6度 */
second.style.transform = "rotate(" + s * 6 + "deg)"
second.style.transformOrigin = ' center 67% '
/*分针一圈360度 一圈走60次 每分钟6度 */
min.style.transform = "rotate(" + m * 6 + "deg)"
min.style.transformOrigin = ' center 67% '
/*时针一圈360度 12小时制 一共走12次 d 每小时30度 */
hour.style.transform = "rotate(" + h * 30 + "deg)"
hour.style.transformOrigin = ' center 60% '
},30)
</script>
</html>最终呈现的视觉效果如下：
以上内容即为该 JavaScript 钟表案例的全部实现细节，希望能为读者的学习提供有益帮助，也欢迎继续支持本站获取更多技术资源。