"

                            ✅万博manbext|体育首页✅㊣全球最大,最信誉的线上综合平台✅万博manbext|体育首页✅千款游戏,砖石级服务,万博manbext|体育首页,欢迎各界玩家加入体验!

                                                      "
                                                      实验:JS+定时器实现在线时钟
                                                      作者:强官涛   类型:Web前端    类别:实验   日期:2017-12-08    阅读:2954 次   消耗积分:0 分


                                                      项目介绍


                                                      本项目主要利用JavaScript结合CSS定位和Transform属性实现一个HTML在线时钟,运行效果如图11-3所示。

                                                      20181029_151002_588.png

                                                      图11-3 HTML在线时钟

                                                       

                                                      本项目实现的功能如下:

                                                      • 根据当前系统的时间,精确到秒显示时间。

                                                      • 模拟正常的钟表走时效果,每一秒种秒针走一小格。

                                                      • 分针每一分种走一小格。

                                                      • 时针不能直接从6点变到7点,不是每小时走一大格,而是模拟每分钟都转动一点点角度的真实效果。



                                                      开发思路


                                                      本项目的实现主要抓住几个关键点,这样事情将会变得非常简单。如果没有把握住关键技术点,则很难形成一套清晰的思路:

                                                      • 表盘是一张固定的背景图片,我们可以直接在网上下载自己喜欢的图片即可。

                                                      • 三个指针是三个DIV,通过设置类似指针的背景图或者利用DIV的背景色模拟即可。

                                                      • 通过设置CSS中Transform变形属性值rotatep完成相应角度的旋转即可模拟走时效果。

                                                      • 可以通过设置指针的旋转基点点为左边或下边来完成指针旋转,也可以设置为拉通的一条DIV,而只为其一半设置背景色或背景图来模拟指针旋转,这种情况下则不需要修改指针的旋转基点(即默认在DIV的正中心点旋转)。

                                                      上述的4条关键点只要我们想明白了,其实实现起来就不难了。首先来看看布局,其实核心元素就4个,一个表盘,三个指针,并且建议对三个指针使用绝对定位(position: absolute)进行。我们知道,绝对定位的一个前提是其父容器不能是默认值static,所以我们只需要简单的将时钟表盘这个父容器设置为position: relative,并不设置任何偏移量即可。

                                                      另外,关于指针的旋转角度的问题,一个表盘有60个刻度,每一个小时之间有5个小格子,一个圆圈是360度(deg),所以每一小格要旋转的角度是6 deg,每一个小时之间相关30 deg。那么我们再通过每秒钟的定时器来获取到当前秒钟数,进而让该数据乘以6,得到当前需要旋转的角度。再获取到当前的分钟数,进而完成让分针每一分钟转到6 deg的效果,同时让时针每一分钟转到0.5 deg。但是此处需要注意的是,我们的角度是假设从12点钟为0 deg来进行计算的,所以在布局时,三个指针都应该是12点钟方向的竖向布局。


                                                      代码实现



                                                      1. 先完成表盘和指针的布局,代码如下:



                                                      <!DOCTYPE html>
                                                      <html>
                                                      <head>
                                                      <meta charset="UTF-8">
                                                      <title>在线时钟</title>
                                                      <style>
                                                      #face {
                                                      width: 600px;
                                                      height: 600px;
                                                      margin: 20px auto;
                                                      backgroundurl("../image/clockface.jpg"no-repeat;
                                                      positionrelative;
                                                      }
                                                      #second {
                                                      width: 4px;
                                                      height: 200px;
                                                      background-color#FC5753;
                                                      positionabsolute;
                                                      left: 298px;
                                                      top: 100px;
                                                      /* 设置指针的旋转基点为下方中间位置 */
                                                                  transform-originbottom center;
                                                      }
                                                      #minute {
                                                      width: 10px;
                                                      height: 175px;
                                                      background-color#0e2218;
                                                      positionabsolute;
                                                      left: 295px;
                                                      top: 125px;
                                                      transform-originbottom center;
                                                      }
                                                      #hour {
                                                      width: 15px;
                                                      height: 150px;
                                                      background-color#5948ff;
                                                      positionabsolute;
                                                      left: 292px;
                                                      top: 150px;
                                                      transform-originbottom center;
                                                      }
                                                      #center {
                                                      width: 30px;
                                                      height: 30px;
                                                      background-colorblack;
                                                      positionabsolute;
                                                      left: 285px;
                                                      top: 285px;
                                                      border-radius: 50%;
                                                      }
                                                      </style>
                                                      </head>
                                                      <body>
                                                      <div id="face">
                                                      <div id="hour"></div>   <!-- 时针 -->
                                                          <div id="minute"></div<!-- 分针 -->
                                                          <div id="second"></div<!-- 秒针 -->
                                                          <div id="center"></div<!-- 中心的小圆点 -->
                                                      </div>
                                                      </body>
                                                      </html>

                                                       

                                                      1. 现在我们来实现定时器代码,完成指针的旋转走时:


                                                      <script>
                                                      setInterval(function() {
                                                      var time = new Date();
                                                      var second = time.getSeconds();
                                                      var minute = time.getMinutes();
                                                      var hour = time.getHours();
                                                      var hourDeg = hour%12*30 + minute*0.5;


                                                      document.getElementById("second").style.transform =

                                                      "rotate(" + second*6 + "deg)";
                                                      document.getElementById("minute").style.transform =

                                                      "rotate(" + minute*6 + "deg)";
                                                      document.getElementById("hour").style.transform =

                                                      "rotate(" + hourDeg + "deg)";
                                                      }, 1000);
                                                      </script>

                                                       

                                                      上述代码的实现部分相对比较简单,所以此处不再赘述。只是期望读者通过对该项目的演练后,能够对表面上看似没有思路的问题多一些思考,对复杂问题多一些分解,并通过不断的代码积累,找到更加简洁高效的实现手段。








                                                      为了答谢大家对蜗牛学院的支持,蜗牛学院将会定期对大家免费发放干货,敬请关注蜗牛学院的官方微信。


                                                      20181009_153045_341.jpg


                                                      版权所有,转载本站文章请注明出处:蜗牛学院在线课堂, http://www.abcderliebe.com/note/4
                                                      上一篇: 实验:JS+定时器实现倒计时程序
                                                      下一篇: 原理:单例模式的陷阱
                                                      提示:登录后添加有效评论可享受积分哦!
                                                      万博manbext|体育首页