2、Css、js写时钟

最新推荐文章于 2023-01-19 18:40:50 发布

弱鸡如我

最新推荐文章于 2023-01-19 18:40:50 发布

阅读量146

点赞数

分类专栏：原生JavaScript练习

本文链接：https://blog.csdn.net/qq_37152533/article/details/108407229

版权

原生JavaScript练习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

技术点

css3 transform
元素添加

成果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JS + CSS Clock</title>
</head>

<body>


  <div class="clock">
    <div class="clock-face">
      <div class="hand hour-hand"></div>
      <div class="hand min-hand"></div>
      <div class="hand second-hand"></div>
    </div>
  </div>


  <style>
    html {
      background: #abc7d3 url(111.jpg);
      background-size: cover;
      font-family: 'helvetica neue';
      text-align: center;
      font-size: 10px;
    }

    body {
      font-size: 2rem;
      display: flex;
      flex: 1;
      min-height: 100vh;
      align-items: center;
    }

    .clock {
      width: 30rem;
      height: 30rem;
      border: 20px solid white;
      border-radius: 50%;
      margin: 50px auto;
      position: relative;
      padding: 2rem;
      box-shadow:
        0 0 0 4px rgba(0, 0, 0, 0.1),
        inset 0 0 0 3px #EFEFEF,
        inset 0 0 10px black,
        0 0 10px rgba(0, 0, 0, 0.2);
        background-color:rgba(0,0,0,0.7)
    }


    .clock-face {
      position: relative;
      width: 100%;
      height: 100%;
      transform: translateY(-3px);
      /* account for the height of the clock hands */
    }

    .clock-face:after {
      width: .8em;
      height: .8em;
      left: 50%;
      top: 50%;
      position: absolute;
      display: block;
      transform: translate(-50%, -50%);
      content: '';
      background-color: #a8c5d1;
      border-radius: 50%;
      box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.1),
        0 0 10px rgba(0, 0, 0, 0.2);
    }

    .hand {
      width: 50%;
      background: #fff;
      position: absolute;
      top: 50%;
      right: 50%;
      box-shadow:
        0 0 0 .1px #fff,
        0 0 0 1px rgba(0, 0, 0, 0.1),
        0 0 8px rgba(0, 0, 0, 0.4),
        2px 5px 1px rgba(0, 0, 0, .5);
      transform-origin: 100% 50%;
      transform: rotate(90deg);
      transition-timing-function: cubic-bezier(0.9, 0.54, 0.26, 1.68);

    }

    .second-hand {
      height: 2px;
      margin-top: -1px;
      border-bottom-left-radius: 100%;
      border-top-left-radius: 100%;
      transition: all .05s cubic-bezier(0.9, 0.54, 0.26, 1.68);
      background-color: red;
    }

    .min-hand {
      width: 45%;
      height: 5px;
      margin-top: -2.5px;
      transition: all .1s cubic-bezier(0.9, 0.54, 0.26, 1.68);
    }

    .hour-hand {
      width: 40%;
      height: 10px;
      margin-top: -5px;
      border-bottom-left-radius: .5em;
      border-top-left-radius: .5em;
      transition: all 3s;
    }
  

    .num {
      width: 30%;
      height: 50%;
      /* 关键的定位 */
      transform-origin: 100% 90%;
      top: 5%;
      right: 50%;
      color: #a8c5d1;
      position: absolute;
    }
    .num div{
      position: absolute;
    }
  </style>

  <script>
    var clock = document.getElementsByClassName('clock-face')[0];
    // 数字
    for (let i = 1; i < 13; i++) {
      var time = document.createElement('div');
      var time_div = document.createElement('div');
      var text = document.createTextNode(i);
      time_div.appendChild(text);
      time.appendChild(time_div);
      time.classList.add('num');
      time.style.transform = `rotate(${i*30+35}deg)`;
      time_div.style.transform = `rotate(${-(i*30+35)}deg)`;
      clock.appendChild(time);
    }
    // 刻度
    for(let i = 1;i<61;i++){
      var pointer = document.createElement('div');
      var text = document.createTextNode('.');
      pointer.appendChild(text);
      pointer.classList.add('num');
      pointer.style.transform = `rotate(${i*6+2}deg)`;
      clock.appendChild(pointer);
    }
    // 转动
    setInterval(setDate, 1000);
    var hourHand = document.getElementsByClassName('hour-hand')[0];
    var minHand = document.getElementsByClassName('min-hand')[0];
    var secondHand = document.getElementsByClassName('second-hand')[0];
    function setDate() {
      var time = new Date();
      var second = time.getSeconds();
      var minutes = time.getMinutes();
      var hours = time.getHours();
      var secDeg = 90 + (second / 60) * 360;
      var minuDeg = 90 + (minutes / 60) * 360;
      var houDeg = 90 + (hours / 12) * 360 + (minutes / 12 / 60) * 360;
      if (secDeg === 90) secondHand.style.transition = 'all 0s';
      else secondHand.style.transition = 'all 0.05s';
      if (minuDeg === 90) minHand.style.transition = 'all 0s';
      else minHand.style.transition = 'all 0.1s'
      secondHand.style.transform = `rotate(${secDeg}deg)`;
      minHand.style.transform = `rotate(${minuDeg}deg)`;
      hourHand.style.transform = `rotate(${houDeg}deg)`;
    }


  </script>
</body>

</html>

问题

刻度和数字位置不太准确

弱鸡如我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2、Css、js写时钟

技术点css3 transform元素添加<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS + CSS Clock</title></head><body> <div class="clock"> <div class="clock-face">
复制链接

扫一扫