钟表
钟表
今天,就来写一下钟表,第一篇文章,不要求写多么完美,只求能让大家或者自己懂,之前见过很多大牛们写的程序,对于菜鸟来说的我,真的看的是天花乱坠,不知其然,更不知其所以然。以后还是向他们多多学习吧。毕竟人应该学会向前(钱)看。
1、 钟表,首先我们要有个圆盘,那我们就造个圆盘,并加上刻度,时针、分针、秒针。
这里面box为外层大边框,kedu是表的刻度 下边的hour、min、seconds代表时分秒

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


3、把数字放到圆盘上


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



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

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

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度


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

最终的效果:

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