原文链接：http://www.bossqiang.com/article/19
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) 先完成表盘和指针的布局，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在线时钟</title>
<style>
#face {
600px;
height: 600px;
margin: 20px auto;
background: url("../image/clockface.jpg") no-repeat;
position: relative;
}
#second {
4px;
height: 200px;
background-color: #FC5753;
position: absolute;
left: 298px;
top: 100px;
/* 设置指针的旋转基点为下方中间位置 */
transform-origin: bottom center;
}
#minute {
10px;
height: 175px;
background-color: #0e2218;
position: absolute;
left: 295px;
top: 125px;
transform-origin: bottom center;
}
#hour {
15px;
height: 150px;
background-color: #5948ff;
position: absolute;
left: 292px;
top: 150px;
transform-origin: bottom center;
}
#center {
30px;
height: 30px;
background-color: black;
position: absolute;
left: 285px;
top: 285px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="face">
<div id="hour"></div> <!-- 时针 -->
<div id="minute"></div> <!-- 分针 -->
<div id="second"></div> <!-- 秒针 -->
<div id="center"></div> <!-- 中心的小圆点 -->
</div>
</body>
</html>
2) 现在我们来实现定时器代码，完成指针的旋转走时：
<script>
setInterval(function() {
var time = new Date();
var second = time.getSeconds();
var minute = time.getMinutes();
var hour = time.getHours();
var hourDeg = hour%12*30 + minute*0.5;
document.getElementById("second").style.transform = "rotate(" + second*6 + "deg)";
document.getElementById("minute").style.transform = "rotate(" + minute*6 + "deg)";
document.getElementById("hour").style.transform = "rotate(" + hourDeg + "deg)";
}, 1000);
</script>
上述代码的实现部分相对比较简单，所以此处不再赘述，其关键点就在于使用CSS3的动画transform的rotate完成定时的旋转即可。只是期望读者通过对该项目的演练后，能够对表面上看似没有思路的问题多一些思考，对复杂问题多一些分解，并通过不断的代码积累，找到更加简洁高效的实现手段。
本实验使用到的表盘背景图片如下，读者可直接另存该图片即可。
