利用JS實現一個可精確到10ms的秒錶的製作（附程式碼）-js教程-PHP中文網

這篇文章帶給大家的內容是關於利用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>

登入後複製

<!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)?(&#39;0&#39;+a):a;
                seconds1.innerHTML=(b<10)?(&#39;0&#39;+Math.floor(b)):(Math.floor(b));
                minutes1.innerHTML=(c<10)?(&#39;0&#39;+Math.floor(c)):(Math.floor(c));
                hours1.innerHTML=(d<10)?(&#39;0&#39;+Math.floor(d)):(Math.floor(d));
            }

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

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

登入後複製

<!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)?(&#39;0&#39;+Math.floor(a)):(Math.floor(a));
                seconds1.innerHTML=(b<10)?(&#39;0&#39;+Math.floor(b)):(Math.floor(b));
                minutes1.innerHTML=(c<10)?(&#39;0&#39;+Math.floor(c)):(Math.floor(c));
                hours1.innerHTML=(d<10)?(&#39;0&#39;+Math.floor(d)):(Math.floor(d));
            }

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

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

登入後複製

相關文章推薦：

################################################################# #####

以上是利用JS實現一個可精確到10ms的秒錶的製作（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！