1、实现效果
2、实现原理
我们有四张图片，clock为表盘，hour、minute、second为钟针，四个图片采取定位的方式定在一起；
表盘使用 position: relative;限制里面子级的定位位置，三个钟针使用 position: absolute;定位在表盘里面。
声明一个间歇函数来让时钟每秒自动转动，在里面声明三个变量来定义 transform: rotate();，规定三个钟针旋转多少度。
3、实现代码
<!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>
* {
box-sizing: border-box;
}
.clock {
width: 600px;
height: 600px;
background: url(./images/clock.jpg) no-repeat;
margin: 50px auto 0;
position: relative;
}
.hh,
.mm,
.ss {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(./images/hour.png) no-repeat center;
}
.mm {
background-image: url(./images/minute.png);
transform: rotate(270deg);
}
.ss {
background-image: url(./images/second.png);
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="clock">
<div class="hh" id="h"></div>
<div class="mm" id="m"></div>
<div class="ss" id="s"></div>
</div>
<script>
// 获取元素秒
const second = document.querySelector('.ss')
// 获取元素分
const minute = document.querySelector('.mm')
// 获取元素时
const hour = document.querySelector('.hh')
// 定义秒变量
let s = 0;
// 定义分变量
let m = 270
// 定义时变量
let h = 0
// 定义一个间歇函数，让时钟自己转动
let seconds = setInterval(function () {
// 一个圆是360°，所以我们一秒应该转动6°
s += 6
// 如果大于等于360，s赋值为0，重新开始
//过了60秒我们应该让分变量进一位，同样是6°
if (s >= 360) {
s = 0
m += 6
}
// 如果大于等于360，m赋值为0，重新开始
//过了60秒我们应该让时变量进一位，因为一天是12小时，所以360°/12为30°
if (m >= 360) {
m = 0
h += 30
}
// 如果大于等于360，h赋值为0，重新开始
if (h >= 360) {
h = 0
}
// 给对应的时分秒改变rotate旋转度数。
second.style.transform = `rotate(${s}deg)`
minute.style.transform = `rotate(${m}deg)`
hour.style.transform = `rotate(${h}deg)`
}, 1000)
</script>
</body>
</html>
4、总结
- 理清思路再去写代码是一件快乐的事情。