suchen

Heim  >  Artikel  >  Web-Frontend  >  Verwenden Sie JS, um eine Stoppuhr mit einer Genauigkeit von 10 ms zu erstellen (Code beigefügt)

Verwenden Sie JS, um eine Stoppuhr mit einer Genauigkeit von 10 ms zu erstellen (Code beigefügt)

不言
不言Original
2018-08-07 11:44:452131Durchsuche

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;

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>

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>

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>

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!

if date 循环 JS 对象
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie erhalte ich den Datei-Upload-Fortschritt in js? js-Code, um den Datei-Upload-Fortschritt zu ermittelnNächster Artikel：Wie erhalte ich den Datei-Upload-Fortschritt in js? js-Code, um den Datei-Upload-Fortschritt zu ermitteln

In Verbindung stehende Artikel

Mehr sehen