JS代码制作圆形钟表

最新推荐文章于 2022-04-21 22:03:12 发布

麸or莘

最新推荐文章于 2022-04-21 22:03:12 发布

阅读量486

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Y_I_M_I_l_u_c_k/article/details/123817220

版权

<!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>
    #box{
      position: relative;
      width: 400px;
      height: 400px;
      border:26px solid rgb(204, 142, 255);
      border-radius: 50%;
    }
    #box>div{
      position: absolute;
      width: 8px;
      height: 26px;
      background-color: rgb(110, 110, 110);
    }   
    #box>div:nth-child(1){
      width: 16px;
      height: 36px;
      top:0px;
      left: 192px;
    }
    #box>div:nth-child(2){
      top:27px;
      right:98px;
    }    
    #box>div:nth-child(3){
      top:98px;
      right:27px;
    }    
    #box>div:nth-child(4){
      width: 16px;
      height: 36px;
      right:10px;
      top: 182px;
    }
    #box>div:nth-child(5){
      bottom:98px;
      right:27px;
    }    
    #box>div:nth-child(6){
      right:98px;
      bottom:27px;
    }
    #box>div:nth-child(7){
      width: 16px;
      height: 36px;
      bottom:0px;
      left: 192px;
    }
    #box>div:nth-child(8){
      bottom:27px;
      left:98px;
    }    
    #box>div:nth-child(9){
      left:27px;
      bottom:98px;
    }    
    #box>div:nth-child(10){
      width: 16px;
      height: 36px;
      left:10px;
      top: 182px;
      /* 以中心点旋转（宽-高）/10 */
      transform: rotate(90deg);
    }
    #box>div:nth-child(11){
      top:98px;
      left:27px;
    }    
    #box>div:nth-child(12){
      top:27px;
      left:98px;
    }    
    #s{
      position: absolute;
      top:68px;
      left: 194px;
      border-radius: 6px;
      width: 12px;
      height: 132px;
      background-color: rgb(255, 198, 188);
      transform-origin: bottom center;
    }   
    #f{
      position: absolute;
      left:196px;
      top:62px;
      border-radius: 4px;
      width: 8px;
      height: 138px;
      background-color: rgb(255, 128, 128);
      transform-origin: bottom center;
    }    
    #m{
      position: absolute;
      width: 4px;
      height: 144px;
      border-radius: 2px;
      background-color: rgb(243, 117, 117);
      top:56px;
      left: 198px;
      transform-origin: bottom center;
    }
    #circle{
      position:relative;
      top:-426px;
      left:26px
    }
    .c{
      position: absolute;
      left: 176px;
      top:176px;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      background-color: rgb(190, 112, 241)
    }
  </style>
</head>
<body>
  <div id="box">
  </div>  
  <div id="circle">    
  <span id="s"></span>
  <span id="f"></span>
  <span id="m"></span>
  <div class="c"></div>
  </div>
  <script>
    window.onload = function(){
      var box = document.getElementById("box")
      var s = document.getElementById("s")
      var f = document.getElementById("f")
      var m = document.getElementById("m")
      for(var i=0;i<12;i++){
      var div = document.createElement("div")
      div.style.transform = "rotate("+i*30+"deg)"
      div.setAttribute("index",i)
      box.appendChild(div)
      }
      var timer = setInterval(function(){
        var date = new Date();
        var hours = date.getHours()*30+date.getMinutes*0.5+date.getSeconds*0.5/60
        var minute = date.getMinutes()*6+date.getSeconds()*0.1
        var second = date.getSeconds()*6
        s.style.transform = "rotate("+hours+"deg)"
        f.style.transform = "rotate("+minute+"deg)"
        m.style.transform = "rotate("+second+"deg)"
      },1000)
    }
  </script>
</body>
</html>

附上成品图