js实现动态时钟

以你之姓@ 2021-10-26 13:22 528阅读 0赞

发现一个超级好用的gif图工具”抠抠视频秀”，很好用也不占内存，长这样
在这里插入图片描述

  1. 效果图
    在这里插入图片描述
  2. 设计思路

1.调整各个指针的位置关系（transform-origin:）

  1. 计算好各个针之间的度数关系 （分针和时针的度数都不仅仅由自身时间决定）
  2. 由于指针初始摆放位置为三点钟方向，所以相对于摆放位置，要正常显示时间需要在计算好的角度基础上-90

关于转动角度的关系具体如下：1 hour=60min =3600s
先分别转动对应针的角度，此时应考虑联动。秒针每秒走6度；
分针每分钟走6度（在考虑秒针对 分针的影响，将秒数换算成分钟）
时针每小时走30度，考虑分针和秒针的影响

  1. 代码如下
    样式

html

  1. <div id="block">
  2.     <div class="hours"></div>
  3.     <div class="minute"></div>
  4.     <div class="second"></div>
  5. </div>
  7. <script>
  8.     setInterval(function () { 
  9.         var hours = document.getElementsByClassName("hours")[0];
  10.         var minute = document.getElementsByClassName("minute")[0];
  11.         var second = document.getElementsByClassName("second")[0];
  12.         var date = new Date();
  13.         var hour = date.getHours(); //调取当前时间的小时
  14.         // console.log(hour);
  15.         var min = date.getMinutes(); //调取当前时间的分钟
  16.         var sec = date.getSeconds(); //调取当前时间的秒
  18.         second.style.transform = "rotate(" + ((sec * 6) - 90) + "deg)";
  19.         minute.style.transform = "rotate(" + (((min + (sec / 60)) * 6) - 90) + "deg)";
  20.         /* */
  21.         hours.style.transform = "rotate(" + (((hour + (sec / 3600) + (min / 60)) * 30) - 90) + "deg)";
  22.         /**/
  23.     }, 1000)
  24. </script>

最后分享一个见到的实现很棒的动态时钟，但是没有使用图片，而是代码绘制！效果如下
在这里插入图片描述
代码如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         /* 全局 */
  8.         *{ 
  9.             margin:0;
  10.             padding:0;
  11.         }
  12.         .clock{ 
  13.             width:400px;
  14.             height:400px;
  15.             border:10px solid #333;
  16.             box-shadow: 0 0 20px 3px #444 inset;
  17.             border-radius:210px;
  18.             position:relative;
  19.             margin:5px auto;
  20.             z-index:10;
  21.             background-color:#f6f6f6;
  22.         }
  23.         /* 时钟数字 */
  24.         .clock-num{ 
  25.             width:40px;
  26.             height:40px;
  27.             font-size:22px;
  28.             text-align:center;
  29.             line-height:40px;
  30.             position:absolute;
  31.             z-index:8;
  32.             color:#555;
  33.             font-family:fantasy, 'Trebuchet MS';
  34.         }
  35.         .em_num{ 
  36.             font-size:28px;
  37.         }
  38.         /* 指针 */
  39.         .clock-line{ 
  40.             position:absolute;
  41.             z-index:20;
  42.         }
  43.         .hour-line{ width:100px;
  44.             height:4px;
  45.             top:198px;
  46.             left:200px;
  47.             background-color:#000;
  48.             border-radius:2px;
  49.             transform-origin:0 50%;
  50.             box-shadow:1px -3px 8px 3px #aaa;
  51.         }
  52.         .minute-line{ 
  53.             width:130px;
  54.             height:2px;
  55.             top:199px;
  56.             left:190px;
  57.             background-color:#000;
  58.             transform-origin:7.692% 50%;
  59.             box-shadow:1px -3px 8px 1px #aaa;
  60.         }
  61.         .second-line{ 
  62.             width:170px;
  63.             height:1px;
  64.             top:199px;
  65.             left:180px;
  66.             background-color:#f60;
  67.             transform-origin:11.765% 50%;
  68.             box-shadow:1px -3px 7px 1px #bbb;
  69.         }
  70.         /* 原点 */
  71.         .origin{ 
  72.             width:20px;
  73.             height:20px;
  74.             border-radius:10px;
  75.             background-color:#000;
  76.             position:absolute;
  77.             top:190px;
  78.             left:190px;
  79.             z-index:14;
  80.         }
  82.         /* 日期 时间 */
  83.         .date-info{ 
  84.             width:160px;
  85.             height:28px;
  86.             line-height:28px;
  87.             text-align:center;
  88.             position:absolute;
  89.             top:217px;
  90.             left:120px;
  91.             z-index:11;
  92.             color:#555;
  93.             font-weight:bold;
  94.         }
  95.         .time-info{ 
  96.             width:92px;
  97.             height:30px;
  98.             line-height:30px;
  99.             text-align:center;
  100.             position:absolute;
  101.             top:270px;
  102.             left:154px;
  103.             z-index:11;
  104.             background-color:#555;
  105.             padding:0;
  106.             box-shadow:0 0 9px 2px #222 inset;
  107.         }
  108.         .time{ 
  109.             width:30px;
  110.             height:30px;
  111.             text-align:center;
  112.             float:left;
  113.             color:#fff;
  114.             font-weight:bold;
  115.         }
  116.         #minute-time{ 
  117.             border-left:1px solid #fff;
  118.             border-right:1px solid #fff;
  119.         }
  121.         /* 刻度 */
  122.         .clock-scale{ 
  123.             width:195px;
  124.             height:2px;
  125.             transform-origin:0% 50%;
  126.             z-index:7;
  127.             position:absolute;
  128.             top:199px;
  129.             left:200px;
  130.         }
  131.         .scale-show{ 
  132.             width:12px;
  133.             height:2px;
  134.             background-color:#555;
  135.             float:left;
  136.         }
  137.         .scale-hidden{ 
  138.             width:183px;
  139.             height:2px;
  140.             float:left;
  141.         }
  142.     </style>
  143. </head>
  144. <body>
  145. <div class="clock" id="clock">
  146.     <!-- 原点 -->
  147.     <div class="origin"></div>
  149.     <!-- 时分秒针 -->
  150.     <div class="clock-line hour-line" id="hour-line"></div>
  151.     <div class="clock-line minute-line" id="minute-line"></div>
  152.     <div class="clock-line second-line" id="second-line"></div>
  154.     <!-- 日期 -->
  155.     <div class="date-info" id="date-info"></div>
  156.     <!-- 时间 -->
  157.     <div class="time-info" >
  158.         <div class="time" id="hour-time"></div>
  159.         <div class="time" id="minute-time"></div>
  160.         <div class="time" id="second-time"></div>
  161.     </div>
  162. </div>
  164. <script>
  165.     (function(){ 
  166.         window.onload=initNumXY(200, 160, 40,40);
  167.         var hour_line = document.getElementById("hour-line");
  168.         var minute_line = document.getElementById("minute-line");
  169.         var second_line = document.getElementById("second-line");
  170.         var date_info = document.getElementById("date-info");
  171.         var week_day = [
  172.             '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'
  173.         ];
  174.         var hour_time = document.getElementById("hour-time");
  175.         var minute_time = document.getElementById("minute-time");
  176.         var second_time = document.getElementById("second-time");
  177.         function setTime(){ 
  178.             var this_day = new Date();
  179.             var hour = (this_day.getHours() >= 12) ?
  180.                     (this_day.getHours() - 12) : this_day.getHours();
  181.             var minute = this_day.getMinutes();
  182.             var second = this_day.getSeconds();
  183.             var hour_rotate = (hour*30-90) + (Math.floor(minute / 12) * 6);
  184.             var year = this_day.getFullYear();
  185.             var month = ((this_day.getMonth() + 1) < 10 ) ?
  186.             "0"+(this_day.getMonth() + 1) : (this_day.getMonth() + 1);
  187.             var date = (this_day.getDate() < 10 ) ?
  188.             "0"+this_day.getDate() : this_day.getDate();
  189.             var day = this_day.getDay();
  190.             hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';
  191.             minute_line.style.transform = 'rotate(' + (minute*6 - 90) + 'deg)';
  192.             second_line.style.transform = 'rotate(' + (second*6 - 90)+'deg)';
  193.             date_info.innerHTML =
  194.                     year + "-" + month + "-" + date + " " + week_day[day];
  195.             hour_time.innerHTML = (this_day.getHours() < 10) ?
  196.             "0" + this_day.getHours() : this_day.getHours();
  197.             minute_time.innerHTML = (this_day.getMinutes() < 10) ?
  198.             "0" + this_day.getMinutes() : this_day.getMinutes();
  199.             second_time.innerHTML = (this_day.getSeconds() < 10) ?
  200.             "0" + this_day.getSeconds():this_day.getSeconds();
  201.         }
  202.         setInterval(setTime, 1000);
  204.         function initNumXY(R, r, w, h){ 
  205.             var numXY = [
  206.                 { 
  207.                     "left" : R + 0.5 * r - 0.5 * w,
  208.                     "top" : R - 0.5 * r * 1.73205 - 0.5 * h
  209.                 },
  210.                 { 
  211.                     "left" : R + 0.5 * r * 1.73205 - 0.5 * w,
  212.                     "top" : R - 0.5 * r - 0.5 * h
  213.                 },
  214.                 { 
  215.                     "left" : R + r - 0.5 * w,
  216.                     "top" : R - 0.5 * h
  217.                 },
  218.                 { 
  219.                     "left" : R + 0.5 * r * 1.73205 - 0.5 * w,
  220.                     "top" : R + 0.5 * r - 0.5 * h
  221.                 },
  222.                 { 
  223.                     "left" : R + 0.5 * r - 0.5 * w,
  224.                     "top" : R + 0.5 * r * 1.732 - 0.5 * h
  225.                 },
  226.                 { 
  227.                     "left" : R - 0.5 * w,
  228.                     "top" : R + r - 0.5 * h
  229.                 },
  230.                 { 
  231.                     "left" : R - 0.5 * r - 0.5 * w,
  232.                     "top" : R + 0.5 * r * 1.732 - 0.5 * h
  233.                 },
  234.                 { 
  235.                     "left" : R - 0.5 * r * 1.73205 - 0.5 * w,
  236.                     "top" : R + 0.5 * r - 0.5 * h
  237.                 },
  238.                 { 
  239.                     "left" : R - r - 0.5 * w,
  240.                     "top" : R - 0.5 * h
  241.                 },
  242.                 { 
  243.                     "left" : R - 0.5 * r * 1.73205 - 0.5 * w,
  244.                     "top" : R - 0.5 * r - 0.5 * h
  245.                 },
  246.                 { 
  247.                     "left" : R - 0.5 * r - 0.5 * w,
  248.                     "top": R - 0.5 * r * 1.73205 - 0.5 * h
  249.                 },
  250.                 { 
  251.                     "left" : R - 0.5 * w,
  252.                     "top" : R - r - 0.5 * h
  253.                 }
  254.             ];
  255.             var clock = document.getElementById("clock");
  256.             for(var i = 1; i <= 12; i++){ 
  257.                 if(i%3 == 0) { 
  258.                     clock.innerHTML += "<div class='clock-num em_num'>"+i+"</div>";
  259.                 } else { 
  260.                     clock.innerHTML += "<div class='clock-num'>" + i + "</div>";
  261.                 }
  262.             }
  263.             var clock_num = document.getElementsByClassName("clock-num");
  264.             for(var i = 0; i < clock_num.length; i++) { 
  265.                 clock_num[i].style.left = numXY[i].left + 'px';
  266.                 clock_num[i].style.top = numXY[i].top + 'px';
  267.             }
  268.             for(var i = 0; i < 60; i++) { 
  269.                 clock.innerHTML += "<div class='clock-scale'> " +
  270.                         "<div class='scale-hidden'></div>" +
  271.                         "<div class='scale-show'></div>" +
  272.                         "</div>";
  273.             }
  274.             var scale = document.getElementsByClassName("clock-scale");
  275.             for(var i = 0; i < scale.length; i++) { 
  276.                 scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)";
  277.             }
  278.         }
  279.     })();
  280. </script>
  281. </body>
  282. </html>

发表评论

表情：
评论列表 （有 0 条评论，528人围观）

还没有评论，来说两句吧...

相关阅读

    相关 html+css+js实现时钟

    html+css+js实现比较特别的时钟 简介： 为止，在中国历史上有留下记载的四代计时器分别为：日晷、沙漏、机械钟、石英钟。在中国市场上石英钟最热销。 时钟一直

    清疚清疚/ 0 赞/ 127 阅读

    相关 Python实现动态时钟小程序

    前言 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。 PS：如有需要Python学习资料的小伙伴可以加点击下方链接

    梦里梦外;梦里梦外;/ 0 赞/ 305 阅读

    相关 JS实现简单时钟效果

    老师上课需要我们做一个时钟的小作业 ，我把它放在上面记录一下啦 表盘和时针我都是用的背景图的形式，然后绝对定位，通过调整left和top确定时针、分针、秒针的位置，tran

    我会带着你远行我会带着你远行/ 0 赞/ 446 阅读