JS之简单秒表的制作(精确到10ms,且没有延迟)

mac2022-06-30  85

<!--利用js制作简单的秒表(给出了思路、分析以及源代码)-->

 

这段时间刚接触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=time0;                var b=time`00/100;                var c=time60000/6000;                var d=time

转载请注明原文地址: https://mac.8miu.com/read-14704.html
最新回复(0)