如何制作一个时钟
如何制作一个时钟呢。这里的时钟指的是,带有指针的那种,而不是电子的。方法至少有2种(因为目前只实践了这两种),css3和canvas
##基础数学知识
我们观察一下时钟,首先想到的是与角度有关。再有是,秒针,分针,时针之间的进位关系。
在讲解这两点之前,先考大家一个问题,4点15时,分针与时针之间的夹角是多少呢?(这可是鹅厂某年的面试题之一)
- 我们都知道
1s = 1 / 60min
,1min = 1 / 60h
; - 观察任意一款手表或时钟,我们会发现,通常时钟的表盘会被分成12个大格,
5*12=60
个小格,而整个表盘是360°
,也就是说每个小格是6°
。换句话说,秒针和分针每动一下,都会走过1小格,走过了6°
,而时针动一下,则走过了一大格,5*6°=30°
;因此,秒针和分针移动的基值是6°,时针是30°; - 另外在分针走动的时候,时针也不是静止不动的,而是不甘寂寞的默默向前移动,也就是说当分针动一下,走了6°时,时针实际上也挪动了
1 / 60 * 30°
。所以,计算时针角度时不要忽略了分针对其的影响。(虽然秒针对分针也有着同样的影响,但几乎看不出来,所以,通常我们会将其忽略)
##如何用JS取到当前的秒,分,时
我们制作的时针是基于当前时间,而用角度的形式将其表现出来的,所以取得当前时间是首步
- 获得当前时间,
var date = new Date()
,获得当前时间,以毫秒数表示。 getFullYear()
,4位年份getMonth()
,从0-11,分别表示1-12月getDate()
,月份中的天数getDay()
,从0-6,分别表示星期日-星期六getHours()
,0-23getMinutes()
,0-59getSecond()
,0-59
##确定各指针的角度
综上两个知识点,我们可以将各指针的角度表示为:
|
|
##各指针之间的进位关系
如果还要显示此时此刻时钟的数字,那么就会面临另一个难点,临界情况,如,从2014-12-13 12:38:59-->2014-12-13 12:39:00
,2014-12-13 12:59:59-->2014-12-13 13:00:00
,2014-12-13 23:59:59-->2014-12-14 00:00:00
的情况
|
|
##涉及到的CSS3知识点
transform:rotateZ()
只需要注意1点:rotateZ(弧度),单位是弧度,即将我们计算的角度通过公式
1° = 180° / π
转化transform-origin
transform-origin:left center;
,设定指针的旋转点为最左端,否则,指针将围绕着自己的中点,进行自旋转。transform: translateZ
制作表盘中的格格,这些格格是采用绝对定位,都挤在表盘的中间,这时用
tranform:translateX(75px)
让它们离中心远一点,到表盘边缘去。
##涉及到的canvas知识点
由于canvas自身的技术特点,在实现上与css3略有不同。
每一秒钟,当前的时钟都不是前一秒的时钟,而是一个新绘制成的时钟。各指针都是重新绘制的。
也就是时钟状态改变的时候,都需要擦除画布,绘制指针
canvas也有与css3中transform类似的方法,如rotate,translate,transform,scale等
##校正时间
通常,我们会使用一个定时器(每秒调用一次函数)来让指针动起来。但是当在移动端时,系统处于节约资源的考虑,当屏幕暗下去时,会禁用一些资源,这个定时器就不会工作了。当我们再次点亮屏幕时,发现时间还是停留在上一次关闭屏幕时的状态,只有当再次刷新页面时,时间也会恢复成准确时间。这时,我们可以通过设定另一个定时器的方法来校正时间。
|
|
##参考的文章