上篇咱们说到，用 Canvas 绘制一个时钟，看起来似乎特别丑，不美观。今天我们再用CSS和JS来实现一个比较漂亮的时钟效果。

老规矩，上效果图：

怎么样，这个效果是不是更像是我们常用的钟表的样子。那么，接下来，我们就去分步实现它吧！

首先，我们的html结构：

<div class="clock">
  <ul class="line_min"></ul>
  <ul class="line_hour"></ul>
  <ol class="number"></ol>
  <ul class="pointer">
    <li class="hour"></li>
    <li class="min"></li>
    <li class="sec"></li>
    <li class="circle"></li>
  </ul>
</div>

分别有分针刻度、时针刻度、时间数字、时针、分针、秒针、表盘中心等元素架构。

给它们加上css样式，如下：

*{
  margin:0;padding:0;
}
body{
  background-color:#fff;
  font-family:"微软雅黑";
}
li{
  list-style:none;
}
h1{
  text-align:center;
  color:#333;
  margin-top:40px;
}
/*表盘*/
.clock{
  position:relative;
  width:200px;
  height:200px;
  border-radius:100%;
  background-color:#292a38;
  margin:50px auto;
}
.pointer li.circle{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-5px;
  margin-left:-5px;
  width:10px;
  height:10px;
  border-radius:100%;
  background-color:#fff;
  transform-origin:left center;
}
.line_hour li,.line_min li{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:left center;
  background-color:#fff;
}
.line_hour li{
  width:10px;
  height:2px;
}
.line_min li{
  width:5px;
  height:2px;
}
/*数字*/
.number{
  position:absolute;
  width:150px;
  height:150px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-family:"微软雅黑";
  font-size:15px;
  color:#fff;
}
.number li{
  position:absolute;
  transform:translate(-50%,-50%);
}
/*指针*/
.pointer li{
  position:absolute;
  top:50%;
  left:50%;
  transform-origin:left center;
  background-color:#fff;
}
.pointer li.hour{
  width:45px;
  height:3px;
  transform:translateY(-50%);
}
.pointer li.min{
  width:60px;
  height:2px;
  transform:translateY(-50%);
}
.pointer li.sec{
  width:95px;
  height:1px;
  transform:translate(-15px,-50%);
}

结构样式完了，重要的是我们的js部分：

* 注意：需要先引入jQuery库

<script src="http://s0.qhimg.com/lib/jquery/183.js"></script>
<script type="text/javascript">
$(function(){
  function init(){
    drawLines($('.line_min'),60,90);
    drawLines($('.line_hour'),12,85);
    drawNumbers($('.number'));
    move();
  }
  init();
/*绘制钟表刻度线
wrap 刻度线的父容器
total 刻度线的总个数
translateX 刻度线在x轴方向的偏移量
*/
function drawLines(wrap,total,translateX){
  var gap = 360/total;
  var strHtml = "";
  for(var i=0; i<total; i++){
    strHtml += '<li style="transform:rotate('+(i*gap)+'deg) translate('+translateX+'px,-50%)"></li>';
  }
  wrap.html(strHtml);
}
/*绘制钟表数字
wrap 数字的父容器
*/
function drawNumbers(wrap){
  var radius = wrap.width()/2;
  var strHtml = '';
  for(var i=1; i<=12; i++){
    var myAngle = i/6*Math.PI;
    var myX = radius + radius*Math.sin(myAngle),
    myY = radius - radius*Math.cos(myAngle);
    strHtml += '<li style="left:'+myX+'px; top:'+myY+'px">'+i+'</li>';
  }
  wrap.html(strHtml);
}
/*钟表走动
转动秒针、分针、时针
*/
function move(){
  setInterval(function(){
    var now = new Date(),
    hour = now.getHours(),
    min = now.getMinutes(),
    sec = now.getSeconds();
    var secAngle = sec*6 - 90,
    minAngle = min*6 + sec*6/60 - 90,
    hourAngle = hour*30 + min*30/60 + sec*30/(60*60) - 90;
    $('.sec').css('transform','rotate('+secAngle+'deg) translateX(-15px)');
    $('.min').css('transform','rotate('+minAngle+'deg)');
    $('.hour').css('transform','rotate('+hourAngle+'deg)');

    document.title = hour + ':' + min + ':' +sec;
    },1000);
  }
})
</script>

其中，有两个重点简单说明一下，其他的跟着代码敲一遍很容易理解的。

第一个重点是绘制钟表上数字的函数。一共12个数字，我们做一个循环，然后分别定位到表盘的相应位置。代码中红框中的算法怎么来的，我们看以下数学算法：

以上看图理解，相信一看就明白每个数字的位置(X,Y)怎么得来的。

其中，

        X = r + r*sin(θ),
        Y = r - r*cos(θ);

r 已知，是我们自己定义的，本例中 r = 150 px，那么θ如何确定呢？

我们是从1到12做循环，数字将表盘一共分为12格，每格角度是30°，那么第i个数字对应的角度为i*30°，转化为弧度即为i*30*π/180=i*π/6 .

以上如此，钟表的12个数字就绘制完成了，突然发现，对敲代码来说，数学知识还是挺重要的嘞！

第二个重点是指针走动的函数。要确定某一时刻时针、分针、秒针各自的角度位置，这个问题在上一篇‘用 Canvas 绘制一个时钟’已经说明过了，这里不再赘述。

最后我们是通过调用init()函数，就可以实现最终效果了，狠戳这里吧。相信大家还有很多很好玩的方法来实现，我们，加油！

Over，拜~