Utilisez JS pour créer un chronomètre précis à 10 ms (code ci-joint)-js tutoriel-php.cn

Le contenu de cet article concerne l'utilisation de JS pour réaliser la production d'un chronomètre pouvant être précis à 10 ms (avec code). Il a une certaine valeur de référence. J'espère que cela sera utile. à vous.

Je viens d'entrer en contact avec js durant cette période et souhaite utiliser les connaissances que j'ai acquises pour réaliser un chronomètre simple.

L'idée de fabriquer un chronomètre est la suivante :

1 Déterminez d'abord les fonctions et l'interface.

Mon objectif est de créer le chronomètre le plus simple, je n'ai donc besoin que des fonctions de démarrage, de fin et de réinitialisation. L'interface est la suivante :

Pas démarré en cours d'exécution :

En cours d'exécution :

2. Concevez la méthode de mise en œuvre.

Tout d'abord, la méthode principale est certainement la méthode setInterval(), qui est utilisée pour afficher l'heure périodiquement. Parce que je veux être précis à 10 ms près, j'ai défini l'intervalle de temps sur 10.

De plus, comment augmenter le temps ?

A. Ce à quoi j'ai commencé à penser, c'est de définir des variables. millisecondes, secondes, minutes et heures. Les millisecondes s'incrémentent de 1 toutes les 10 ms, lorsque Lorsque milliSeconds >= 100, utilisez milliSeconds modulo 100, et en même temps, les secondes sont augmentées de 1. De la même manière, lorsque les secondes atteignent 60 Les minutes sont incrémentées de 1 et les heures sont incrémentées de 1 lorsque les minutes atteignent 60.

Cependant, afin d'assurer l'uniformité du format (je souhaite afficher 02:01:24:06 au lieu de 2:1:24:6), j'ai changé les quatre variables en 8 variables. les mêmes pensées que ci-dessus. (Pour le code, voir « Chronomètre avec délai » à la fin de cette page).

Cependant, il y a un problème de retard pendant le fonctionnement, et le retard va s'accumuler. Il peut encore fonctionner de manière relativement précise lorsque le temps est court. Au fil du temps, l'heure indiquée sur le chronomètre s'écartera considérablement de l'heure standard.

B. Afin de réduire le délai, j'ai conçu une autre méthode (en fait cette méthode a un délai plus élevé que la précédente). À l'heure actuelle, une seule variable temporelle est utilisée pour enregistrer le début du déclenchement. Le nombre de millisecondes écoulées depuis que le bouton a été enfoncé (le temps est en 10 ms, a/b/c/d ci-dessous représente les millisecondes (10 ms), les secondes, les minutes et les heures). Afin de poursuivre l'unité de format, j'ai ajouté si Dans l'instruction, lorsque a/b/c/d est inférieur à 10, ajoutez 0 espace réservé devant.

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

Copier après la connexion

Comparez le plan A avec le plan B. Puisque A utilise une forme imbriquée pour calculer le temps, lorsque le temps est court, le plan A nécessite moins de jugements et est plus efficace tandis que pour le plan B, chaque cycle doit passer par quatre calculs. Par conséquent, lorsque le temps est court, l'efficacité est atteinte. est encore inférieur à A.

C. Afin de synchroniser avec le temps réel sans aucune erreur, j'ai pensé à une autre façon. Dans l'objet JS Date, il existe une méthode appelée getTime(), qui est utilisée pour renvoyer le nombre de millisecondes depuis le 1er janvier 1970. Lorsque vous cliquez sur start, getTime() est déclenché, et ce temps est utilisé comme base. getTime() est exécuté toutes les dix millisecondes, et ce dernier est soustrait du premier pour obtenir le temps relatif. De cette manière, le problème de la synchronisation avec le temps réel est parfaitement résolu.

Ci-joint trois morceaux de code ci-dessous :

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>

Copier après la connexion

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>

Copier après la connexion

Code 3 (code synchronisé avec l'heure)

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

Copier après la connexion