Front-End

Clock-CSS3-JavaScript

好久没写博客了，今天有点空来写点啥，昨天下午的电话面试问到了CSS3，面试官并没有问的很详细，几乎是点到为止，知道有这个东西就OK的程度。我也很少使用CSS3(border-radius除外)。

想起了一年多前写的Demo，那是在网上看到了别人的作品然后自己又重新写了一个。主要使用了CSS3的transform-origin和transform属性，再用JavaScript获取时间并计算每个表针对应的角度，最后开个定时器，每一秒刷新一下表针的角度。

原理比较简单，今天看自己以前写的代码的时候，发现有些还要自己去重新理解，因为几乎没有注释，还好代码简单，先来看一下Demo：
Clock
除了三个表针，其它都可以忽略。三个表针位于一个表盘的背景图之上。三个表针是三div，每个表针都应该以表盘的中心为旋转，所以就使用了transform-origin属性，分别对三个表针设置对应的参数就可以了。

为了显示当前的时间，我们应该调节表针的角度，这个就要使用JavaScript里的Data()对象，下面是所有的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var sec = document.getElementById('sec');
var min = document.getElementById('min');
var hour = document.getElementById('hour');

function deg(i) {
    return 'rotate(' + i + 'deg)';
}

function go() {
    var myDate = new Date();
    var s = myDate.getSeconds();
    var m = myDate.getMinutes();
    var h = myDate.getHours();
    var iSec = 6*s;
    var iMin = m*6 + parseInt(s/10);
    var iHour = (h%12)*30 + parseInt(m/2)+ parseInt(s/120);

    sec.style.transform = deg(iSec);
    min.style.transform = deg(iMin);
    hour.style.transform = deg(iHour);
}
go();
setInterval(go,1000);

最重要的就是函数go，函数的开始先定义一个Data()对象，再分别获取当前的时、分以及秒，一圈有360度，每一秒贡献6度，所以对于秒针就有：

1
var iSec = 6*s;

再看分针，每分钟对其角度的贡献为6度，每秒秒针对分针的贡献为1/10度，所有对于分针就有：

1
var iMin = m*6 + parseInt(s/10);

最后看时针，每小时对其角度贡献30度，每分钟分针对时针的贡献为1/2度，每秒秒针对时针的贡献为1/120度(其实秒针对时针的贡献几乎可以忽略了)，所以对于时针就有：

1
var iHour = (h%12)*30 + parseInt(m/2)+ parseInt(s/120);

角度换算出来之后就要在样式中修改各自的旋转角度，最后记得每秒刷新一下就OK！

这个项目在我的Github可以找到，点击查看。或者直接用Git克隆

1
git clone https://github.com/zhujun24/Clock-CSS3-JavaScript.git

Fork me on GitHub