效果
首先还是看下最终效果（录制gif太麻烦哈哈），时钟会根据当前时间进行转动。
image.png
难点
1、当前时间转化为旋转的角度
// 获取当前时间
const date = new Date();
// 得出当前时间度数
const secondDeg = date.getSeconds()*6;
const minDeg = date.getMinutes()*6 + (date.getSeconds()/60)*6;
const hourDeg = date.getHours()*30 + (date.getMinutes()/60)*30;
2、定时器的使用 [setTimeout、setInterval、requestAnimationFrame]
//setInterval // 持续动作，设定间隔，持续执行
setTime()
setInterval(setTime, 1000)
//setTimeout //设定延迟，执行一次
/* function timeoutHandler(){
setTime();
setTimeout(timeoutHandler, 1000);
}
setTimeout(timeoutHandler, 1000); */
// requestAnimationFrame //处理画面更新的setTimeout
/* function animationHandler() {
setTime();
window.requestAnimationFrame(animationHandler);
}
window.requestAnimationFrame(animationHandler); */
三者详细介绍 ： JS动画三剑客——setTimeout、setInterval、requestAnimationFrame
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Clock</title>
<style>
html {
background: url("https://unsplash.it/1500/1000?image=881&blur=5");
background-size: cover;
font-size: 10px;
}
body {
margin: 0;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}
.clock {
margin: auto;
width: 200px;
height: 200px;
border: 20px solid white;
border-radius: 100%;
position: relative;
}
.clock_face {
position: relative;
width: 100%;
height: 100%;
}
.clock_face:after {
content: '';
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: coral;
}
.hand {
position: absolute;
width: 100%;
height: 100%;
}
.second-hand:after {
position: absolute;
content: '';
display: block;
width: 3px;
height: 100px;
background-color: red;
bottom: 50%;
left: 50%;
transform: translate(-50%, 0%);
}
.min-hand:after {
position: absolute;
content: '';
display: block;
width: 5px;
height: 80px;
background-color: cadetblue;
bottom: 50%;
left: 50%;
transform: translate(-50%, 0);
}
.hour-hand:after {
position: absolute;
content: '';
display: block;
width: 8px;
height: 50px;
background-color: white;
bottom: 50%;
left: 50%;
transform: translate(-50%, 0);
}
</style>
</head>
<body>
<div class="clock">
<div class="clock_face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
<script>
;(function () {
const second = document.querySelector(".second-hand");
const min = document.querySelector(".min-hand");
const hour = document.querySelector(".hour-hand");
function setTime() {
// 获取当前时间
const date = new Date();
// 得出当前时间度数
const secondDeg = date.getSeconds()*6;
const minDeg = date.getMinutes()*6 + (date.getSeconds()/60)*6;
const hourDeg = date.getHours()*30 + (date.getMinutes()/60)*30;
// 画样式
second.style.transform = `rotate(${secondDeg}deg)`
min.style.transform = `rotate(${minDeg}deg)`
hour.style.transform = `rotate(${hourDeg}deg)`
}
//setInterval
setTime()
setInterval(setTime, 1000) // 持续动作，设定间隔，持续执行
//setTimeout //设定延迟，执行一次
/* function timeoutHandler(){
setTime();
setTimeout(timeoutHandler, 1000);
}
setTimeout(timeoutHandler, 1000); */
// requestAnimationFrame //处理画面更新的setTimeout
/* function animationHandler() {
setTime();
window.requestAnimationFrame(animationHandler);
}
window.requestAnimationFrame(animationHandler); */
})()
</script>
</body>
</html>
