当前位置:Gxlcms > JavaScript > 利用JS实现一个可精确到10ms的秒表的制作(附代码)

利用JS实现一个可精确到10ms的秒表的制作(附代码)

时间:2021-07-01 10:21:17 帮助过:130人阅读

本篇文章给大家带来的内容是关于利用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判断的次数较少,效率较高;而对于方案B来说,每次循环必然要经过四次计算,因此,在时间较短时, 效率甚至比A还低。

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

下面附上三段代码:

代码1

<!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 id="span41">0</span>
        </div>
        <input id="input1" type="button" value="start" onclick="whenClick();">
        <input id="input2" type="button" value="clear" onclick="clear1();">
        <script  type="text/javascript">
            var milliSeconds1 = document.getElementById("span41");
            var milliSeconds0 = document.getElementById("span40");
            var seconds1 = document.getElementById("span31");
            var seconds0 = document.getElementById("span30");
            var minutes1 = document.getElementById("span21");
            var minutes0 = document.getElementById("span20");
            var hours1 = document.getElementById("span11");
            var hours0 = document.getElementById("span10");
            var flag;

            function whenClick(){//  开始/暂停
                var inputValue = document.getElementById("input1");
                if(inputValue.value=="start"||inputValue.value=="continue"){
                    inputValue.value=" stop";
                    start1();
                }
                else {
                    inputValue.value="continue";
                    stop1();
                }
            }
            
            function clear1(){//  清零
                stop1();
                milliSeconds1.innerHTML = milliSeconds0.innerHTML = 
                seconds1.innerHTML = seconds0.innerHTML = minutes1.innerHTML = 
                minutes0.innerHTML = hours1.innerHTML = hours0.innerHTML = 0;
                document.getElementById("input1").value = "start";
            }

            function start1(){//  开始/继续
                flag = setInterval("timeIncrement();",10);
            }

            function timeIncrement(){
                milliSeconds1.innerHTML++;
                if(milliSeconds1.innerHTML>=10){
                    milliSeconds1.innerHTML%=10;
                    milliSeconds0.innerHTML++;
                    if(milliSeconds0.innerHTML>=10){
                        milliSeconds0.innerHTML%=10;
                        seconds1.innerHTML++;
                        if(seconds1.innerHTML>=10){
                            seconds1.innerHTML%=10;
                            seconds0.innerHTML++;
                            if(seconds0.innerHTML>=6){
                                seconds0.innerHTML%=6
                                minutes1.innerHTML++;
                                if(minutes1.innerHTML>=10){
                                    minutes1.innerHTML%=10;
                                    minutes0.innerHTML++;
                                    if(minutes0.innerHTML>=6){
                                        minute0.innerHTML%=6;
                                        hours1.innerHTML++;
                                        if(hours1.innerHTML>=10){
                                            hours1.innerHTML%=10;
                                            hours0.innerHTML++;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            function stop1(){//  暂停/停止
                clearInterval(flag);
            }

        </script>
    </body>
</html>

代码2

<!doctype html>
<html>
    <head>
        <title>仍然有延迟的秒表</title>
        <style type="text/css"></style>        
    </head>
    <body>
        <div id="div1">
            <span id="span1">00</span> :
            <span id="span2">00</span> :
            <span id="span3">00</span> :
            <span id="span4">00</span>
        </div>
        <input id="input1" type="button" value="start" onclick="whenClick();">
        <input id="input2" type="button" value="clear" onclick="clear1();">
        <script  type="text/javascript">
            var milliSeconds1 = document.getElementById("span4");
            var seconds1 = document.getElementById("span3");
            var minutes1 = document.getElementById("span2");
            var hours1 = document.getElementById("span1");
            var time = 0;
            var flag;

            function whenClick(){//  开始/暂停
                var inputValue = document.getElementById("input1");
                if(inputValue.value=="start"||inputValue.value=="continue"){
                    inputValue.value=" stop";
                    start1();
                }
                else {
                    inputValue.value="continue";
                    stop1();
                }
            }
            
            function clear1(){//  清零
                stop1();
                milliSeconds1.innerHTML = seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00";
                time=0;
                document.getElementById("input1").value = "start";
            }

            function start1(){//  开始/继续
                flag = setInterval("timeIncrement();",10);
            }

            function timeIncrement(){
                time++;
                var a=time%100;
                var b=time%6000/100;
                var c=time%360000/6000;
                var d=time%8640000/360000;
                milliSeconds1.innerHTML=(a<10)?('0'+a):a;
                seconds1.innerHTML=(b<10)?('0'+Math.floor(b)):(Math.floor(b));
                minutes1.innerHTML=(c<10)?('0'+Math.floor(c)):(Math.floor(c));
                hours1.innerHTML=(d<10)?('0'+Math.floor(d)):(Math.floor(d));
            }

            function stop1(){//  暂停/停止
                clearInterval(flag);
            }

        </script>
    </body>
</html>

代码3(与时间同步的代码)

<!doctype html>
<html>
    <head>
        <title>秒表</title>
        <style type="text/css"></style>        
    </head>
    <body>
        <div id="div1">
            <span id="span1">00</span> :
            <span id="span2">00</span> :
            <span id="span3">00</span> :
            <span id="span4">00</span>
        </div>
        <input id="input1" type="button" value="start" onclick="whenClick();">
        <input id="input2" type="button" value="clear" onclick="clear1();">
        <script  type="text/javascript">
            var milliSeconds1 = document.getElementById("span4");
            var seconds1 = document.getElementById("span3");
            var minutes1 = document.getElementById("span2");
            var hours1 = document.getElementById("span1");
            var time=0;
            var pre_time=0;
            var intervals=0;
            var pre_intervals=0;
            var flag;

            function whenClick(){//  开始/暂停
                var inputValue = document.getElementById("input1");
                if(inputValue.value=="start"||inputValue.value=="continue"){
                    var date= new Date();
                    time = date.getTime();
                    pre_time=time;
                    inputValue.value="stop ";
                    start1();
                }
                else {
                    inputValue.value="continue";
                    stop1();
                }
            }
            
            function clear1(){//  清零
                stop1();
                milliSeconds1.innerHTML = seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00";
                time=0;
                pre_time=0;
                intervals=0;
                pre_intervals=0;
                document.getElementById("input1").value = "start";
            }

            function start1(){//  开始/继续
                flag = setInterval("timeIncrement();",10);
            }
            
            function timeIncrement(){
                date = new Date();
                intervals=date.getTime()-time+pre_intervals;
                var a=intervals%1000/10;
                var b=intervals%60000/1000;
                var c=intervals%3600000/60000;
                var d=intervals/3600000;
                milliSeconds1.innerHTML=(a<10)?('0'+Math.floor(a)):(Math.floor(a));
                seconds1.innerHTML=(b<10)?('0'+Math.floor(b)):(Math.floor(b));
                minutes1.innerHTML=(c<10)?('0'+Math.floor(c)):(Math.floor(c));
                hours1.innerHTML=(d<10)?('0'+Math.floor(d)):(Math.floor(d));
            }

            function stop1(){//  暂停/停止
                date = new Date();
                pre_intervals += date.getTime()-pre_time;
                clearInterval(flag);
            }

        </script>
    </body>
</html>

相关文章推荐:

以上就是利用JS实现一个可精确到10ms的秒表的制作(附代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行