JavaScript之创意时钟项目(实例讲解)

“时钟展示项目”说明文档(文档尾部附有相应代码

一、最终效果展示:

二、项目亮点

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.页面过于简洁,有待进一步优化和改进;

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/5146.html