本篇文章给大家带来的内容是关于利用JS实现一个可精确到10ms的秒表的制作(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
这段时间刚接触js,想利用所学的知识自制一款简单的秒表。
制作秒表的思路如下:
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 占位。var a=time%100;
var b=time%6000/100;
var c=time%360000/6000;
var d=time%8640000/36000;
将方案A与B比较。由于A用了嵌套的形式来计算时间,在时间较短时,方案A判断的次数较少,效率较高;而对于