模拟机械时钟

      我们知道Javascript提供了一个对象Date(),通过这个内置的对象，可以很容易地获取当前系统或设备的时间。此外new一个Date()，我们还可以利用它的许多方法获取到具体的年月日时分秒，甚至是时间累计的字符串，时间戳是距离1970年1月1日换算。

     那么我们如何利用这点模拟机械时钟的转动呢？

     首先，利用html5的canvas画钟盘，需要画三个半径不等的圆，分别为r1 5px, r2 145px 150px。或许你会疑惑，一个钟盘顶多两个圆足够，一个圆心，一个圆边，另一个圆有何用？山人自有妙计，且往下看。接下来，我们画指针，我们有两种常规的方法，一是用hr，另一个是用div，我们采用第二种，因为hr存在兼容性问题，在不同的浏览器中，上下边距有差异。此时，钟盘和指针都有了，当我们标注上数字，机械钟就有九分像了。

      接下来，我们利用定时器setInterval()让指针转动起来，这里就要用到小学的数学知识了，每秒钟时针分针秒针各转多少度，当然指针的旋转我们用到了css3的新属性translate。

      百里，我们已行九十。我们看界面上的钟还是少了点什么。没错，这个钟没有刻度，不太直观，于是我们可以for一个旋转的刻度，此时钟盘五花八门，上面那个看似没用的圆此时就派上了用场。利用层级z-index优先级可以达到目的。

      最后，稍微美化下界面就可以了。

Demo地址：http://www.sunscript.top/clock/ 

转载于:https://www.cnblogs.com/jiangcheng-langzi/p/6544790.html