教你用JS手写简单的秒表(精确到10ms,没有延迟)

原创 Fly丶 教程 js 5698阅读 21 天前 举报

制作秒表的思路如下:

1、首先定出功能以及界面。

我的目的是做最简单的秒表,因此只需要开始、结束以及清零的功能。界面如下图所示:

未开始运行:

运行中:  

2、构思实现的方式。

首先,核心方法肯定是 setInterval() 方法,用于周期性地显示时间。 因为我要精确到10ms, 所以设置时间间隔为10。

再者,如何令时间递增?

A . 我开始想到的是设置变量 milliSeconds、seconds、minutes 以及 hours 。milliSeconds每10ms递增1, 当 milliSeconds >= 100 时,用milliSeconds模100,同时seconds增1 。同理,seconds 满60时 minutes 递增1 ,minutes 满 60 时 hours 递增1。

但是,为了保证格式的统一性(我想要显示 02:01:24:06,而不是显示 2:1:24:6),于是又将四个变量变为8个变量,思想同上。(代码参见本页最后 “有延时的秒表”)。

不过,在运行的时候出现了延迟问题,并且该延迟还会进行累加。在时间较短时还能比较准确地运行,时间一长,秒表上的时间就会和标准时间误差比较大。

B . 为了让延迟减小,我又设计了另外一种方法(实际上这种方法延迟比上一种更高)。此时只用一个time变量,来记录触发 start 按钮以后所经过的毫秒数(time以10ms为单位,下面的a/b/c/d表示毫秒(10ms)、秒、分、时)。为了追求格式的统一性,我加入了 if 语句,当a/b/c/d小于10时,前面添加 0 占位。

将方案A与B比较。由于A用了嵌套的形式来计算时间,在时间较短时,方案A判断的次数较少,效率较高;而对于方案B来说,每次循环必然要经过四次计算,因此,在时间较短时, 效率甚至比A还低。

C . 为了与真实时间同步,不产生任何误差,我又想到了另一种方式。在JS的Date对象里面,有一个方法叫做 getTime(), 用于返回 1970 年 1 月 1 日至今的毫秒数。在点击start时,触发 getTime() ,以此时间作为基准,每十毫秒执行一次  getTime() ,让后者减去前者得到相对时间。这样一来,就完美解决了与真实时间同步的问题。

下面附上三段代码:

代码A

代码B

C代码

以上就是我本次想要分享的一些东西,如果有更好的方法欢迎大家留言讨论。
以上就是我本次想要分享的一些东西,如果有更好的方法欢迎大家留言讨论。
对web开发技术感兴趣的同学,欢迎加入Q群:866109386,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复