教你用JS手寫簡單的秒錶（精確到10ms，沒有延遲）

時間 2019-11-13

標籤手寫簡單秒錶精確 10ms 沒有延遲欄目 JavaScript 简体版

原文原文鏈接

製做秒錶的思路以下：javascript

一、首先定出功能以及界面。css

個人目的是作最簡單的秒錶，所以只須要開始、結束以及清零的功能。界面以下圖所示：html

未開始運行：前端

運行中：　　java

二、構思實現的方式。學習

首先，核心方法確定是 setInterval() 方法，用於週期性地顯示時間。由於我要精確到10ms，因此設置時間間隔爲10。spa

再者，如何令時間遞增？設計

A . 我開始想到的是設置變量 milliSeconds、seconds、minutes 以及 hours 。milliSeconds每10ms遞增1，當 milliSeconds >= 100 時，用milliSeconds模100，同時seconds增1 。同理，seconds 滿60時 minutes 遞增1 ，minutes 滿 60 時 hours 遞增1。code

可是，爲了保證格式的統一性（我想要顯示 02:01:24:06，而不是顯示 2:1:24:6），因而又將四個變量變爲8個變量，思想同上。（代碼參見本頁最後「有延時的秒錶」）。htm

不過，在運行的時候出現了延遲問題，而且該延遲還會進行累加。在時間較短時還能比較準確地運行，時間一長，秒錶上的時間就會和標準時間偏差比較大。

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 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");//前端全棧交流學習圈：866109386
            var hours1 = document.getElementById("span11");   //面相1-3年經驗前端開發人員
            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>

###代碼B

<!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();//前端全棧交流學習圈：866109386
                }//面相1-3年經驗前端開發人員
            }//幫助突破技術瓶頸，提高思惟能力
            
            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>

###C代碼

<!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; //前端全棧交流學習圈：866109386
            var intervals=0;//面相1-3年經驗前端開發人員
            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>

以上就是我本次想要分享的一些東西，若是有更好的方法歡迎你們留言討論。