写一个js钟表小demo

最近在做一个围绕圆圈的线条  想到了时钟

实现这个最主要的是一个css树形 transform origin属性；

时钟的刻度由js循环遍历加载生成

html  部分

<div class="box">
    <ul>


    </ul>
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>
</div>

css部分

* {
    padding: 0;
    margin: 0;
    list-style: none;
  }
.box{
    width:  200px;
    height: 200px;
    /*border: 1px solid #000;*/
    border-radius: 50%;
    margin: 100px auto;
    position: relative;
}
ul{
    width: 200px;
    height:200px;
    border-radius: 50%;
}

ul li{
    width: 4px;
    height: 10px;
    background:#2F83EE;
    position: absolute;
    top: 0;
    left: 99px;
    -webkit-transform-origin: center 100px;
}

li:nth-of-type(5n){
    height: 15px;
}

.hour{
    width: 3px;
    height: 70px;
    background: #000;
    position: absolute;
    top: 50px;
    left: 97px;
    -webkit-transform-origin: 1.5px 50px;
}
.minute{
    width: 2px;
    height: 80px;
    background: #000;
    position: absolute;
    top: 40px;
    left: 97.5px;
    -webkit-transform-origin: 1px 60px;
}
.second{
    width: 1px;
    height: 90px;
    background: #000;
    position: absolute;
    top: 30px;
    left: 98px;
    -webkit-transform-origin: 0.5px 70px;
}

js部分

用js动态生成刻度

var oUl=document.querySelector('ul');

for (var i=0;i<60;i++) {
    var li=document.createElement('li');
    oUl.appendChild(li);
}

var aLi= document.querySelectorAll('li');

for (var k=0;k<60;k++) {
    aLi[k].style.transform = 'rotate('+(k+1)*6+'deg)';
}

var hour=document.querySelector('.hour');
var second=document.querySelector('.second');
var minute=document.querySelector('.minute')

setInterval(function(){
    var now=new Date();
    var Second=now.getSeconds();
    var Minute=now.getMinutes();
    var Hour=now.getHours();

    hour.style.transform='rotate('+(Hour+Minute/60)*30+'deg)';
    minute.style.transform='rotate('+(Minute+Second/60)*6+'deg)';
    second.style.transform='rotate('+(Second)*6+'deg)';
},1000)