钟表

 今天，就来写一下钟表，第一篇文章，不要求写多么完美，只求能让大家或者自己懂，之前见过很多大牛们写的程序，对于菜鸟来说的我，真的看的是天花乱坠，不知其然，更不知其所以然。以后还是向他们多多学习吧。毕竟人应该学会向前（钱）看。

1、 钟表，首先我们要有个圆盘，那我们就造个圆盘,并加上刻度，时针、分针、秒针。

这里面box为外层大边框，kedu是表的刻度  下边的hour、min、seconds代表时分秒

主要标签.png

这里边解释一下为什么要把12放在最前面，因为后边把数字放在刻度盘上相应位置的时候，要对数字进行旋转一定的角度，而12是不用旋转，对应的是所有span元素的第0个，0乘以相应的角度还是0，就相当于不转，这时候其实我有个想法，其实对于每一个数字来说都可以当做一个参照物，对其他数字进行旋转，不必拘泥于12这个数字，任何刻度都可以，但为了写这个，还是先这样写，回头我尝试之后再来做补充或者纠正。可能大家这会迷糊了，没事，后面就会懂了。

2、下面就是样式了，本来是想先给图片的，但考虑到大家可以看代码来想想他的样子就先给代码了

圆盘.png

刚开始的状态.png

3、把数字放到圆盘上

刻度样式.png

刻度的js.png

这里就和前面的对应上了，表盘360度，12个刻度，每个之间30度，那12放在第一个位置就是这里的i = 0;就等于不在动，那么这里也有个问题 ，刚旋转完之后，数字自身的角度也会变化，那就要把数字在旋转回去可以了，效果如图：

未旋转状态.png

数字归位.png

把数字纠正.png

4、下面就是时针、分针、和秒针了

时针、分针、秒针样式是基本上相同的，只不过长短的问题，一共是200px,一半是100px,时针最短，height = 50px, top = 50px 正好是100px,时针、分针、秒针旋转的时候以底部为中心进行旋转。

时针、分针、秒针的样式

transform-origin:设置旋转元素的基点位置.亦可以理解为对称轴，基准轴，可以通过它来做立方体

效果.png

5、接下来就是要把钟表的时间设定为和现实中一样的时间了，

var date = new Date();   console.log(date);这时候打印的就是现在准确的时间，然后进行赋值。

var hour = date.getHours()%12;这一步把获取到的时间的小时给hour,对12取余是因为24小时制度存在，如果是22点，取余就是10，就会指向10的位置。

  var min = date.getMinutes();  把获取到的分钟给min

var seconds = date.getSeconds();把获取到的秒数给seconds

然后设置时间，秒针和分针都是满60变0，时针是12变0，因为这里是取余所以是13，变1。时针是每分钟转动360/12/60 = 0.5度,分针每分钟旋转360/60 = 6度，秒针每秒旋转360/60 = 0.6度

给时针、分针、秒针进行赋值.png

时间的变换和时针、分针、秒针旋转的角度.png

6、然后就是调用函数，设置定时器，每秒来调用一次

调用函数，跑起来.png

最终的效果：

最终效果图.gif

时间是17:34，这个gif效果截的不好，请原谅，谢谢观看。