前端|创建简单动态时钟

算法与编程之美

发布于 2020-08-10 16:54:05

1.6K0

发布于 2020-08-10 16:54:05

文章被收录于专栏：算法与编程之美算法与编程之美

介绍

动态时钟，就是通过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)';

 

            })

效果图：