Verwenden Sie JS, um eine Stoppuhr mit einer Genauigkeit von 10 ms zu erstellen (Code beigefügt)-js-Tutorial-php.cn

Der Inhalt dieses Artikels befasst sich mit der Verwendung von JS zur Erstellung einer Stoppuhr, die auf 10 ms genau sein kann (mit Code). Ich hoffe, dass es hilfreich ist Dir zu helfen.

Ich bin in dieser Zeit gerade mit js in Kontakt gekommen und möchte das erlernte Wissen nutzen, um eine einfache Stoppuhr herzustellen.

Die Idee zur Herstellung einer Stoppuhr ist wie folgt:

1. Bestimmen Sie zunächst die Funktionen und die Schnittstelle.

Mein Ziel ist es, die einfachste Stoppuhr zu erstellen, sodass ich nur die Start-, End- und Reset-Funktionen benötige. Die Schnittstelle sieht wie folgt aus:

Nicht gestartet:

Wird ausgeführt:

2. Konzipieren Sie die Implementierungsmethode.

Zuallererst ist die Kernmethode definitiv die setInterval()-Methode, die zur periodischen Anzeige der Zeit verwendet wird. Da ich eine Genauigkeit von 10 ms erreichen möchte, stelle ich das Zeitintervall auf 10 ein.

Außerdem, wie kann man die Zeit verlängern?

A . Worüber ich nachgedacht habe, ist das Festlegen von Variablen Millisekunden, Sekunden, Minuten und Stunden. milliSeconds erhöht sich alle 10 ms um 1, wenn Wenn milliSeconds >= 100, verwenden Sie milliSeconds modulo 100 und erhöhen gleichzeitig die Sekunden um 1. Das Gleiche gilt, wenn die Sekunden 60 erreichen Die Minuten werden um 1 erhöht und die Stunden werden um 1 erhöht, wenn die Minuten 60 erreichen.

Um jedoch die Einheitlichkeit des Formats zu gewährleisten (ich möchte 02:01:24:06 statt 2:1:24:6 anzeigen), habe ich die vier Variablen in 8 Variablen geändert. die gleichen Gedanken wie oben. (Den Code finden Sie unter „Stoppuhr mit Verzögerung“ am Ende dieser Seite.)

Allerdings gibt es während des Betriebs ein Verzögerungsproblem, und die Verzögerung wird sich häufen. Auch wenn die Zeit knapp ist, kann sie noch relativ genau laufen. Mit der Zeit weicht die Zeit auf der Stoppuhr stark von der Standardzeit ab.

B. Um die Verzögerung zu reduzieren, habe ich eine andere Methode entwickelt (tatsächlich hat diese Methode eine höhere Verzögerung als die vorherige). Zu diesem Zeitpunkt wird nur eine Zeitvariable zur Aufzeichnung des Triggerstarts verwendet Die Anzahl der Millisekunden, die seit dem Drücken der Taste vergangen sind (die Zeit wird in 10 ms angegeben, a/b/c/d unten stehen für Millisekunden (10 ms), Sekunden, Minuten und Stunden). Um die Einheitlichkeit des Formats zu gewährleisten, habe ich if hinzugefügt Anweisung: Wenn a/b/c/d kleiner als 10 ist, fügen Sie den Platzhalter 0 voran.

var a=time%100;
var b=time%6000/100;
var c=time%360000/6000;
var d=time%8640000/36000;

Nach dem Login kopieren

Vergleichen Sie Plan A mit Plan B. Da A eine verschachtelte Form zur Zeitberechnung verwendet, erfordert Plan A weniger Beurteilungen und ist effizienter, während bei Plan B jeder Zyklus vier Berechnungen durchlaufen muss ist sogar niedriger als A.

C. Um fehlerfrei mit der Echtzeit zu synchronisieren, habe ich mir einen anderen Weg überlegt. Im JS Date-Objekt gibt es eine Methode namens getTime(), mit der die Anzahl der Millisekunden seit dem 1. Januar 1970 zurückgegeben wird. Wenn Sie auf „Start“ klicken, wird getTime() ausgelöst und diese Zeit wird als Basis verwendet. getTime() wird alle zehn Millisekunden ausgeführt und letztere von ersterer subtrahiert, um die relative Zeit zu erhalten. Auf diese Weise wird das Problem der Synchronisierung mit der Echtzeit perfekt gelöst.

Im Anhang finden Sie drei Codeteile:

Code 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>

Nach dem Login kopieren

Code 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)?(&#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>

Nach dem Login kopieren

Code 3 (Code mit der Zeit synchronisiert)

<!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>

Nach dem Login kopieren

Empfohlene verwandte Artikel:

Das obige ist der detaillierte Inhalt vonVerwenden Sie JS, um eine Stoppuhr mit einer Genauigkeit von 10 ms zu erstellen (Code beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!