前端js实现时钟案例

最新推荐文章于 2024-07-25 09:24:40 发布

柒\

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量187

点赞数 1

文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/weixin_47544648/article/details/132585879

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>时钟</title>
  <style>
    body{
      background-color: black;
    }
    .box{
      width: 600px;
      height: 600px;
      border: 10px solid white;
      border-radius: 50%;
      box-sizing: border-box;
      box-shadow:inset 0 0 30px #000;
      background-color: #fff;
      margin: 50px auto;
      position: relative;
    }
    .cicle{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #000;
      position: absolute;
      left: calc(50% - 30px / 2);
      top: calc(50% - 30px / 2);
    }
    .hour,.min,.sec{
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
    }
    .hour{
      width: 6px;
      height: 200px;
      background-color: blue;

      position: absolute;
      top: 120px;
      left: calc(50% - 6px / 2);
      transform-origin: center 170px;
      animation: aa 43200s infinite linear;
      
    }
    .min{
      width: 4px;
      height: 220px;
      background-color: green;
      position: absolute;
      top: 100px;
      left: calc(50% - 4px / 2);
      transform-origin: center 190px;
      animation: aa 3600s infinite linear;
    }
    .sec{
      width: 2px;
      height: 240px;
      background-color: red;
      position: absolute;
      top: 80px;
      left: calc(50% - 2px / 2);
      transform-origin: center 210px;
      animation: aa 60s infinite steps(60);
    }
    @keyframes aa {
      0%{
        transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
      }
    }
    .scale {
        position: absolute;
        left: calc((100% - 4px) / 2);
        top: calc((100% - 20px) / 2);
        width: 2px;
        height: 20px;
        background-color: #000;
        transform-origin: center center;
      }
      .num {
        position: absolute;
        left: calc((100% - 50px) / 2);
        top: calc((100% - 50px) / 2);
        width: 50px;
        height: 50px;
        font-size: 40px;
        text-align: center;
        line-height: 50px;
        user-select: none;
      }
  </style>
</head>
<body>
  <div class="box">
    <div class="cicle"></div>
    <div class="hour"></div>
    <div class="min"></div>
    <div class="sec"></div>
    <div class="cicle"></div>
  </div>

  <script>
    var box = document.querySelector(".box");
    var hours = document.querySelector(".hour");
    var min = document.querySelector(".min");
    var sec = document.querySelector(".sec");

    var date = new Date();
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();

    sec.style.animationDelay = -s + 's';
    min.style.animationDelay = -(s + m * 60) + "s";
    hours.style.animationDelay = -(s + m * 60 + h * 3600) + "s";

    for(var i=0;i<60;i++){
      var scale = document.createElement('div');
      scale.classList.add('scale');
      scale.style.transform = "rotate(" + i * 6 + "deg) translateY(-280px)";
      if (i % 5 === 0) {
        scale.style.height = "30px";
        scale.style.top = "calc((100% - 30px) / 2)";
        scale.style.transform = "rotate(" + i * 6 + "deg) translateY(-275px)";
      }
      box.appendChild(scale);
    }
    for (var i = 1; i < 13; i++) {
      var num = document.createElement("span");
      num.innerText = i;
      num.classList.add("num");
      num.style.transform =
        "rotate(" +
        i * 30 +
        "deg) translateY(-220px) rotate(" +
        -i * 30 +
        "deg)";
      box.appendChild(num);
    }
  </script>
</body>
</html>