介绍
动态时钟，就是通过CSS工具的美化效果和引入JavaScript，让网页呈现出钟表的动态效果，让它能够记录时间。通过改变背景颜色、指针颜色和阴影效果，让时钟呈现不同的颜色。
思路解析
制作动态时钟时，要注意以下细节：
（1）使用box-shadow标签来设置时钟的轮廓和阴影。
（2）用JS获取每个指针和它的时间，用到const限定符和querySelector方法。
制作过程
（1）创建一个主容器class="clock"的时钟，为每个指针命名。
<div><!--时钟--> <div> <!--时针--> <div id="hr"></div> </div> <div> <!--分针--> <div id="mn"></div> </div> <div> <!--秒针--> <div id="sc"></div> </div> </div> |
（2）用CSS为时钟布置背景，在.clock使用Flex布局方式，并且让它水平、垂直方向都居中；引入时钟的背景图片，用background-size: cover把背景图片放大到适合容器的尺寸，让图片比例不变。
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #091921; } .clock{ width: 350px; height: 350px; display: flex; justify-content: center; align-items: center; background: url(img/clock.png); background-size: cover; border: 4px solid #091921; border-radius: 50%; .clock{ width: 350px; height: 350px; display: flex; justify-content: center; align-items: center; background: url(img/clock.png); background-size: cover; border: 4px solid #091921; border-radius: 50%; box-shadow: 0 -15px 15px rgba(255,255,255,0.05),/*时钟上半部分外发光*/ inset 0 -15px 15px rgba(255,255,255,0.05),/*时钟下半部分内发光*/ 0 15px 15px rgba(0,0,0,0.3),/*时钟下半部分外阴影*/ inset 0 15px 15px rgba(0,0,0,0.3);/*时钟上半部分内阴影*/ } |
（3）使用 CSS3 中的 ":before" 伪元素为时钟添加实心小圆点，方便指针确认中心点。
.clock:before{ content: ''; /*必须存在，使伪元素显示*/ position: absolute; width: 15px; height: 15px; background: #fff; border-radius: 50%; z-index: 10000;/*使实心小圆点在视图的最上层，遮挡住指针交叉的部分*/ } |
（4）为不同指针添加宽高和颜色。
.clock .hour,.clock .min,.clock .sec{ position: absolute; } .clock .hour, .hr{ width: 160px; height: 160px; } .clock .min, .mn{ width: 190px; height: 190px; } .clock .sec, .sc{ width: 230px; height: 230px; } .hr .mn .sc{ display: flex; justify-content: center; /*align-items: center;*/ position: absolute; border-radius: 50%; } .hr:before{ content: ''; position: absolute; width: 8px; height: 80px; background: orangered; z-index: 10; border-radius: 6px 6px 0 0; margin-left: 76px; } .mn:before{ content: ''; position: absolute; width: 4px; height: 90px; background: #fff; z-index: 11; border-radius: 6px 6px 0 0; margin-left: 93px; } .sc:before{ content: ''; position: absolute; width: 2px; height: 150px; background: red; z-index: 11; border-radius: 6px 6px 0 0; margin-left: 114px; } |
图1
（5）用JS获取到当前的时间，分别计算每个指针应该旋转的角度。其中，deg代表：度(一个圆 360 度)。
const deg = 6; /*获取每个指针*/ const hr = document.querySelector("#hr"); const mm = document.querySelector("#mn"); const ss = document.querySelector("#sc"); setInterval(() => { let day = new Date(); /*获取当前时间*/ let hh = day.getHours() * 30; let mm = day.getMinutes() * deg; let ss = day.getSeconds() * deg; hr.style.transform = 'rotate('+(hh+mm/12)+'deg)'; /*计算每个指针应旋转的角度*/ mn.style.transform = 'rotate('+mm+'deg)'; sc.style.transform = 'rotate('+ss+'deg)';
}) |
效果图：
图2
