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

2019-11-19 17:11:19

字体：大中小

来源：转载

供稿：网友

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

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

布局代码如下：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title></title>    <style type="text/css" id="sty">      *{        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;      }    </style>  </head>  <body>    <div id="wrap">      <ul id="list">      </ul>      <div id="hour"></div>      <div id="min"></div>      <div id="sec"></div>      <div id="con"></div>    </div>  </body></html>

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

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

<script type="text/javascript">  window.onload=function(){    var oWrap=document.getElementById('wrap');    var oList=document.getElementById('list');    var oSty=document.getElementById('sty');    var tump='';    for(var i=0;i<60;i++){      var aLi=document.createElement('li');      oList.appendChild(aLi);      tump+='#wrap ul li:nth-child('+(i+1)+'){transform: rotate('+(i+1)*6+'deg);}';      oSty.innerHTML+=tump;    }    var oSec=document.getElementById('sec');    var oMin=document.getElementById('min');    var oHour=document.getElementById('hour');    function time(){      var date=new Date();      var s=date.getSeconds();      var m=date.getMinutes()+(s/60);      var h=date.getHours()+(m/60);      oSec.style.transform='rotate('+s*6+'deg)';      oMin.style.transform='rotate('+m*6+'deg)';      oHour.style.transform='rotate('+h*30+'deg)';    }    time();    setInterval(time,1000);  }</script>

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

上一篇：前端开发之CSS原理详解

下一篇：js鼠标跟随运动效果