<section>
<div class="clock">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
</div>
</section>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
section {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 100%;
height: 100%;
}
.clock {
height: 500px;
width: 90%;
max-width: 500px;
margin: 0 auto;
border-radius: 50%;
/* border: 5px solid gray; */
position: relative;
background-image: url(https://www.freepngimg.com/thumb/clock/33735-6-clock-no-hands-clipart.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.min,
.sec,
.hour {
position: absolute;
top: 50%;
left: 50%;
width: 30%;
height: 5px;
background-color: rgb(0, 0, 0);
transform-origin: left;
border-radius: 50%;
transform: rotate(-90deg);
}
JS
格式化
const minEl = document.querySelector(".min");
const secEl = document.querySelector(".sec");
const hourEl = document.querySelector(".hour");
setInterval(() => {
const date = new Date();
const secDeg = (date.getSeconds() / 60) * 360 - 90;
const minDeg = (date.getMinutes() / 60) * 360 - 90;
const hourDeg = (date.getHours() / 12) * 360 - 90;
secEl.style.transform = `rotate(${secDeg}deg)`;
minEl.style.transform = `rotate(${minDeg}deg)`;
hourEl.style.transform = `rotate(${hourDeg}deg)`;
// console.log(date.getSeconds())
// console.log(date.getMinutes())
}, 1000);