JS时钟小案例

玖柒的小窝

发布于 2021-12-08 12:51:43

2.5K0

发布于 2021-12-08 12:51:43

文章被收录于专栏：各类技术文章~

JS真好玩（时钟小案例）

时钟在我们的生活中随处可见，今天我们就用js来制作一个简单的时钟，先来看下效果

效果图

上代码（注释的很详细🤞）

<div id="box">
    <div class="hour"></div>
    <div class="min"></div>
    <div class="sec"></div>
  </div>
复制代码

  #box {
      width: 610px;
      height: 610px;
      margin: 0 auto;
      background: url('./表盘1.png') no-repeat center;
      position: relative;
    }

    #box div {
      position: absolute;
    }

    .hour {
      width: 15px;
      height: 300px;
      background: url('./时针.png') no-repeat;
      top: 110px;
      left: 297px;
      background-size: cover;
      /* 改变被转换元素的位置 */
      transform-origin: 50% 68%;
    }

    .min {
      width: 17px;
      height: 300px;
      background: url('./分针.png') no-repeat;
      top: 140px;
      left: 297px;
      background-size: cover;
      transform-origin: 50% 58%;
    }

    .sec {
      width: 15px;
      height: 160px;
      background: url('./秒针.png') no-repeat;
      top: 193px;
      left: 297px;
      background-size: cover;
      transform-origin: 50% 75%;
    }
复制代码

 var sec = document.querySelector('.sec');
    var min = document.querySelector('.min');
    var hour = document.querySelector('.hour');
    var getTime = function () {
      // 获取当前时间
      var d = new Date();
      // 返回 Date 对象的小时 (0 ~ 23)
      var h = d.getHours();
      // 返回 Date 对象的分钟 (0 ~ 59)
      var m = d.getMinutes();
      // 返回 Date 对象的秒数 (0 ~ 59)
      var s = d.getSeconds();
      // 表盘时分秒针转动
      hour.style.transform = "rotate(" + (h * 30 + m * 0.5) + "deg)";
      min.style.transform = "rotate(" + (m * 6 + s * 0.1) + "deg)";
      sec.style.transform = "rotate(" + s * 6 + "deg)";
    }
    setInterval(getTime, 10);
复制代码