教你用JS手写简单的秒表（精确到10ms，没有延迟）

最新推荐文章于 2023-10-31 17:55:28 发布

VIP文章霜如明月

最新推荐文章于 2023-10-31 17:55:28 发布

阅读量3k

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/q3254421/article/details/83350092

版权

制作秒表的思路如下：

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/360000;

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

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

下面附上三段代码：

###代码A

<!Doctype html>
<html>
    <head>
        <title>有延迟的秒表</title>
        <style type="text/css"></style>        
    </head>
    <body>
        <div id="div1">
            <span id="span10">0</span><span id="span11">0</span> :
            <span id="span20">0</span><span id="span21">0</span> :
            <span id="span30">0</span><span id="span31">0</span> :
            <span id="span40">0</span><span i

最低0.47元/天解锁文章

霜如明月

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
教你用JS手写简单的秒表（精确到10ms，没有延迟）

制作秒表的思路如下：1、首先定出功能以及界面。我的目的是做最简单的秒表，因此只需要开始、结束以及清零的功能。界面如下图所示：未开始运行：运行中：　　2、构思实现的方式。首先，核心方法肯定是 setInterval() 方法，用于周期性地显示时间。因为我要精确到10ms，所以设置时间间隔为10。再者，如何令时间递增？A . 我开始想到的是设置变量 milliSeconds、sec...
复制链接

扫一扫