1.  实验简介

本项目主要利用JavaScript结合CSS定位和Transform属性实现一个HTML在线时钟，运行效果如图所示。

本项目实现的功能如下：
(1)    根据当前系统的时间，精确到秒显示时间。
(2)    模拟正常的钟表走时效果，每一秒种秒针走一小格。
(3)    分针每一分种走一小格。
(4)    时针不能直接从6点变到7点，不是每小时走一大格，而是模拟每分钟都转动一点点角度的真实效果。

2. 开发思路
本项目的实现主要抓住几个关键点，这样事情将会变得非常简单。如果没有把握住关键技术点，则很难形成一套清晰的思路：
(1) 表盘是一张固定的背景图片，我们可以直接在网上下载自己喜欢的图片即可。
(2) 三个指针是三个DIV，通过设置类似指针的背景图或者利用DIV的背景色模拟即可。
(3) 通过设置CSS中Transform变形属性值rotatep完成相应角度的旋转即可模拟走时效果。
(4) 可以通过设置指针的旋转基点点为左边或下边来完成指针旋转，也可以设置为拉通的一条DIV，而只为其一半设置背景色或背景图来模拟指针旋转，这种情况下则不需要修改指针的旋转基点（即默认在DIV的正中心点旋转）。

上述的4条关键点只要我们想明白了，其实实现起来就不难了。首先来看看布局，其实核心元素就4个，一个表盘，三个指针，并且建议对三个指针使用绝对定位（position: absolute）进行。我们知道，绝对定位的一个前提是其父容器不能是默认值static，所以我们只需要简单的将时钟表盘这个父容器设置为position: relative，并不设置任何偏移量即可。
另外，关于指针的旋转角度的问题，一个表盘有60个刻度，每一个小时之间有5个小格子，一个圆圈是360度（deg），所以每一小格要旋转的角度是6 deg，每一个小时之间相关30 deg。那么我们再通过每秒钟的定时器来获取到当前秒钟数，进而让该数据乘以6，得到当前需要旋转的角度。再获取到当前的分钟数，进而完成让分针每一分钟转到6 deg的效果，同时让时针每一分钟转到0.5 deg。但是此处需要注意的是，我们的角度是假设从12点钟为0 deg来进行计算的，所以在布局时，三个指针都应该是12点钟方向的竖向布局。

3. 代码实现

1) 先完成表盘和指针的布局，代码如下：