“时钟展示项目”说明文档(文档尾部附有相应代码)
一、最终效果展示:
二、项目亮点
1.代码结构清晰明了
2.可以实时动态显示当前时间与当前日期
3.界面简洁、美观、大方
4.提高浏览器兼容性
三、知识点汇总:
jQuery、原生javascript、css3、h5
四、重难点解释
1.各个指针的旋转角度的获取
首先要明确如下概念:
时钟指针旋转一周360度
时针:
表盘上共有12小时,每经过一小时,要旋转30度;
分针:
表盘上共有60个小格子,分针每走一分钟,经过一个小格子,转动6度;
秒针:
表盘上共有60个小格子,秒针每走一分钟,经过一个小格子,也转动6度;
(1)当前时间的获取
举个例子(以时针旋转角度计算为例): 比如现在时间是 9:28;
时针应该在9和10之间,而通过 方式只能获取到整点,所以既要获取到当前的小时,也要获取到当前的分钟,这样才能更好的来确定时针的旋转角度,即为如下方式:
(2)旋转角度的获取
由于时针每经过一个小时后,旋转30度,故获取时针旋转角度如下:
同理,分针与秒针的旋转角度如下:
分针:
秒针:
为了使时钟更加的精准,这里精确到了毫秒;
(3)执行频率,即秒针旋转频率控制
调整函数的执行时间间隔即可改变秒针转动频率。
五、项目待优化之处
1.页面过于简洁,有待进一步优化和改进;