CSS与JS结合制作钟表

CSS结合JS来制作钟表，算是比较好的熟悉CSS 与 JS 结合的艺术表达。

 

布局上定义一个大个div 里面套一个ul用来制作表盘的60个竖线 再套四个div 分别对应时针 分针 秒针 和 中间圆点。

CSS样式上 主要要灵活运用position的定位 和 transform-origin的定位 决定 针的旋转角度 和 初始化竖线的角度 都是基于表的中点。

JS上 主要获得属性 并通过循环生产竖线样式。并通过new Date()来获得当前时间，并通过公式计算出旋转角度 通过style.transform 来修改针的旋转角度。