今天的效果图如下：
这个效果是利用JS和CSS做了一个简单的时钟。 话不多说，我们直接开始吧~
我们可以将实现的内容分为JS和CSS两部分，JS负责实现动态的指针转动的效果，CSS负责实现静态的时钟样式。
CSS部分
初始状态如下图：
我们可以看到，我们需要画一个圆，并在其中嵌套指针盒子。
其实很简单，
- 首先将容器div盒子的border-radius设置为50%即可实现圆环的效果；
- 然后在其中嵌套三个宽度为大盒子一半的指针小盒子，为其设置定位position:absolute以及top:50%；
- 最后利用
transform:rotate(90deg)将其旋转90度到达12点钟方向。（或者直接在第二步令left：50%设置到该位置也可以）
JS部分
在这里我们需要做出的主要效果就是：（1）指针随时间的转动 （2）指针转动过程的停顿效果
第一点：我们需要用到new Date()创建一个Date对象，调用其getSeconds()和getMinutes()等来获取当前时间的时、分、秒，然后考察的就是你的数学能力啦！！！ ->根据得到的秒数转获得指针应该转动的度数。最后设置指针盒子的transform为 rotate(你求得的度数deg），就可以啦~
第二点：这里其实用到的算是CSS的部分，如何令指针的转动获得一顿一顿的效果呢？ 我们需要了解一下transition-timing-function，在这个属性中我们就可以设置指针在转动的过程中要如何变化，即调用cubic-bezier函数并传入相关参数。
关于cubic-bezier函数，大家可以去下面这个网站去了解，会对你的理解有很大帮助哦： cubic-bezier
好了，简单总结一下：
做完之后回头看，你会发现其实也没有什么难点，当我们将静态布局设置好后，我们只需要利用我们的数学知识，将得到的分数、秒数转化为指针转动的度数传入rotate函数中即可，接着再了解一下cubic-bezier函数就能够理解指针如何实现一顿一顿的效果，那么整个效果就已经完成啦
代码如下：
<!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>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
background-image: url(../img/black.jpg);
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 300px;
height: 300px;
border: 13px solid white;
border-radius: 50%;
padding: 16px;
box-shadow:
0 0 10px rgba(0, 0, 0, .3),
0 0 0 4px rgba(0, 0, 0, .3),
inset 0 0 10px #efefef,
inset 0 0 0 4px #efefef;
position: relative;
}
.nav {
height: 100%;
width: 100%;
position: relative;
}
.hand {
width: 50%;
height: 11px;
background-color: #efefef;
position: absolute;
top: 50%;
transform-origin: 100%;
/* 以哪个点为原点进行变换 */
transform: rotate(90deg);
transition: all 0.1s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
/* 进出的动画效果 贝塞尔曲线 可以看https://cubic-bezier.com */
}
.two{
width: 45%;
left:15px;
}
.three{
width: 40%;
left:30px;
}
</style>
</head>
<body>
<div class="box">
<div class="nav">
<div class="hand one"></div>
<div class="hand two"></div>
<div class="hand three"></div>
</div>
</div>
<script>
let one = document.querySelector(".one");
let two = document.querySelector(".two");
let three = document.querySelector(".three");
function time() {
let now = new Date();
let second = now.getSeconds();
let minute = now.getMinutes();
let hour = now.getHours();
console.log(second, minute, hour);
one.style.transform=`rotate(${second*6+90}deg)`
two.style.transform=`rotate(${minute*6+second*6/60+90}deg)`
three.style.transform=`rotate(${hour*30+minute*30/60+90}deg)`
}
setInterval(() => {
time();
}, 1000);
time();
</script>
</body>
</html>