JS实现简易刻度时钟示例代码

如图所示，利用JS实现简易的刻度时钟；

原理如下：利用60等份的li进行布局，li两两之间的间隔为6deg，把基点定在圆心上，使得li圆形分布。然后另外设置三条针线的样式的位置，基点同样定在圆心上，然后秒针每秒动6deg，分针每秒动1/60deg，时针每秒动1/3600deg。

布局代码如下：

  
    
    
    
      *{
 margin: 0;
 padding: 0;
 list-style: none;
      }
      #wrap{
 width: 200px;
 height: 200px;
 border: 1px solid #000;
 border-radius: 50%;
 margin: 20px auto;
 position: relative;
      }
      #wrap ul{
 position: relative;
      }
      #wrap ul li{
 width: 2px;
 height: 6px;
 background: #000;
 position: absolute;
 left: 99px;
 top: 0;
 -moz-transform-origin: center 100px;
      }
      #wrap ul li:nth-child(5n){
 height: 10px;
      }
      #con{
 width: 10px;
 height: 10px;
 background: #000;
 border-radius: 50%;
 position: absolute;
 left: 95px;
 top: 95px;
      }
      #hour{
 width: 5px;
 height: 70px;
 background: red;
 border-radius: 50%;
 position: absolute;
 left: 98px;
 top: 35px;
 -moz-transform-origin: center 65px;
      }
      #min{
 width: 3px;
 height: 85px;
 background: #000;
 border-radius: 50%;
 position: absolute;
 left: 98.5px;
 top: 20px;
 -moz-transform-origin: center 80px;
      }
      #sec{
 width: 2px;
 height: 100px;
 background: gray;
 border-radius: 50%;
 position: absolute;
 left: 98.5px;
 top: 20px;
 -moz-transform-origin: center 80px;
      }
    
  
  
    
      


      
      
      
      
      
    
  

布局代码里需要注意的是：每隔四个刻度就有一个刻度比较长，所以我们在设置样式的时候要特别注意加上：#wrap ul li:nth-child(5n){height: 10px;}。第5n个的长度变长。

JS代码中主要搞清楚三针之间的度数关系就好做了，代码如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。