静态预览
表盘可以直接搜索图片后放上去，这样做比较简单，接下来我们就来做这个动态时钟
首先，我们要在body里面写我们所需要的时针，分针，秒针，然后把它们放在一个div里。
<body>
<div class="box">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
</body>
接下来就是样式的设置，可以用外部引用
对大的div进行设置，可以用弹性布局的方式进行布局
.box{
position: absolute;
top:calc(50% - 150px);
left:calc(50% - 150px);
width: 300px;
height: 300px;
background-color: white;
border-radius: 50%;
border: 20px solid white;
box-shadow: 0px 0px 10px 0px gray inset,
0px 0px 10px 0px gray;
justify-content: center;
align-items: center;
display: flex;
background-image: url(下载.jpg);
background-position: 19px 19px;
background-repeat: no-repeat;
}
.box::before{
//中间灰点
content: "";
width: 15px;
height: 15px;
position: absolute;
border-radius: 50%;
background-color: gray;
justify-content: center;
align-items: center;
z-index: 100;
}
对时针，分针，秒针进行样式设置(部分代码)，这里主要是用到伪元素选择器
.hr::before{
content: "";
position: absolute;
width: 8px;
height: 60px;
background-color: red;
z-index: 10;
border-radius: 8px 8px 0 0;
top:20px;
}
.mn::before{
content: "";
position: absolute;
width: 6px;
height: 80px;
background-color: black;
z-index: 10;
border-radius: 6px 6px 0 0;
top:20px;
}
.sc::before{
content: "";
position: absolute;
width: 4px;
height: 120px;
background-color: gray;
z-index: 10;
border-radius: 4px 4px 0 0;
top:20px;
}
最后就是js部分编写
const deg = 6;//设置旋转角度
const hr=document.querySelector("#hr");
const mn=document.querySelector("#mn");
const sc=document.querySelector("#sc");
setInterval(() =>{
//定时器 ()=>相当于function()
let day = new Date();//获取当前时间
let hh=day.getHours() * 30; //获取小时
let mm=day.getMinutes() * deg; //获取分
let ss=day.getSeconds() * deg; //获取秒
hr.style.transform = "rotateZ("+hh+"deg)";
mn.style.transform = "rotateZ("+mm+"deg)";
sc.style.transform = "rotateZ("+ss+"deg)";
});
这样就基本完成设计了