又来一个时钟效果了，这个的实现不需要canvas，都是div、ul、li画出的，好玩有真实。

哈哈~

需要的js才能实现到走动这个效果，但js的内容不多，也不难。

主要是一个css里transform的使用的思路，transform里有很多变幻属性，而普通的时钟

在我心中就是个圆圆的东西，那么是不是可以旋转这个属性（rotate）实现了，它的刻度

使用旋转且把旋转点设置在圆心，那不就可以绕着圆心转了吗，而时针它们的底部不是和

圆心接触的吗，那么设置时针的底部为旋转点不就OK了，大概的说了说思路。

代码：

transform #clock{ width height border border-radius margin position #clock ul{ width height position list-style padding margin #clock ul li{ width height background transform-origin position top left #clock ul li:nth-of-type(5n+1){ height #hour{ height width background position top left transform-origin #min{ height width background position top left transform-origin transform #sec{ height width background position top left transform-origin #dot{ width height position left top background border-radius); ); ]; ); ); ); ; ; ){ strLi; } oUl.innerHTML=strLi; ){ strCss; } oCss.innerHTML+=strCss; time(); setInterval(time,1000); function time(){ Date(); date.getHours(); date.getMinutes(); date.getSeconds(); oHour.style.transform; }

使用标签画图最主要的是定位，因为这样我们就可以把弄到形状的盒子放到你所想要的位置，内部css样式表是可以使用获取元素的方式获取的，这样就可以

使用innerHTML为其添加样式，且可以循环添加，还有因为刻度太多所以使用循环添加，这样省时省力，至于剩下的就是定时器了，给定好1秒的时间，每1

秒执行一次函数，这样它就是动起来了。