js圆型时钟

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>JS+jQuery圆盘时钟</title>
  <script type="text/javascript" src="/template/default/home/lib/js/jquery/jquery-1.8.2.min.js"></script>

</head>
<body>
<div class="box" id="clock">
  <!-- 钟表原点 -->
  <div class="origin"></div>
  <!-- 1——12 -->
  <div class="dot_box">
    <div class="dot">6</div>
    <div class="dot">5</div>
    <div class="dot">4</div>
    <div class="dot">3</div>
    <div class="dot">2</div>
    <div class="dot">1</div>
    <div class="dot">12</div>
    <div class="dot">11</div>
    <div class="dot">10</div>
    <div class="dot">9</div>
    <div class="dot">8</div>
    <div class="dot">7</div>
  </div>
  <!-- 时、分、秒针 -->
  <div class="pointer hour" id="hour"></div>
  <div class="pointer minute" id="minute"></div>
  <div class="pointer second" id="second"></div>
</div>
</body>
</html>
<style>
  body,
  div,
  p {
    font-family: 'Microsoft Yahei';
    font-size: 14px;
  }

  .box {
    width: 100px;
    height: 100px;
    border: 5px solid #000000;
    margin: 15px auto;
    border-radius: 50%;
    box-shadow: 0px 0px 10px 3px #444 inset;
    position: relative;
  }

  .dot_box {
    width: inherit;
    height: inherit;
  }

  .dot {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    position: absolute;
  }

  /*钟表原点*/
  .origin {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff0000;
    top: 42px;
    left: 42px;
    position: absolute;
  }

  /* 指针 */
  .pointer {
    position: absolute;
    position: absolute;
    z-index: 20;
  }

  /*时分秒*/
  .hour {
    width: 50px;
    height: 2px;
    top: 45px;
    left: 50px;
    background-color: #000;
    border-radius: 2px;
    transform-origin: 0 50%;
    /*box-shadow: 1px -3px 8px 3px #aaa;*/
  }

  .minute {
    width: 32px;
    height: 2px;
    top: 45px;
    left: 45px;
    background-color: #000;
    transform-origin: 7.692% 50%;
    box-shadow: 1px -3px 8px 1px #aaa;
  }

  .second {
    width: 42px;
    height: 1px;
    top: 45px;
    left: 45px;
    background-color: #f60;
    transform-origin: 11.765% 50%;
    box-shadow: 1px -3px 7px 1px #bbb;
  }

</style>
<script>
  $(function() {
    var clock = document.getElementById("clock");

    function initRadian() {
      //12个数字的位置设置
      var radius = 42; //圆半径
      var radian = 360 / $(".dot").length; //每个div对应的弧度数
      //每一个dot对应的弧度;
      var radians = radian * Math.PI / 180;
      $(".dot").each(function(index) {
        $(this).css({
          "left": 42 + Math.sin((radians * index)) * radius,
          "top": 42 + Math.cos((radians * index)) * radius
        });
      });
    }
    initRadian(); //回调函数
    //设置动态时间
    function setTime() {
      var date = new Date();
      //获取时分秒
      var hours = date.getHours(),
              minutes = date.getMinutes(),
              seconds = date.getSeconds(),
              date = date.getDate();
      //时分秒针设置
      var hourRotate = (hours * 30 - 60) + (Math.floor(minutes / 12) * 6);
      hour.style.transform = 'rotate(' + hourRotate + 'deg)';
      minute.style.transform = 'rotate(' + (minutes * 6 - 60) + 'deg)';
      second.style.transform = 'rotate(' + (seconds * 6 - 60) + 'deg)';
    }
    //设置时间间隔
    setInterval(setTime, 1000);
  });

</script>
posted @ 2022-03-11 12:07 码海无牙φ 阅读(113) 评论(0) 收藏举报
刷新页面返回顶部
js圆型时钟

公告
