JS を使用して 10 ミリ秒の精度のストップウォッチを作成します (コードが添付されています)-jsチュートリアル-php.cn

JS を使用して 10 ミリ秒の精度のストップウォッチを作成します (コードが添付されています)

不言

リリース： 2018-08-07 11:44:45

オリジナル

2138 人が閲覧しました

この記事の内容は、JS を使用して 10ms まで正確なストップウォッチを実現することです (コード付き)。必要な友人は参考にしていただければ幸いです。。

この時期に js に触れたばかりなので、学んだ知識を使って簡単なストップウォッチを作りたいと思っています。

ストップウォッチの作り方は次のとおりです:

1. まず機能とインターフェースを決定します。

私の目的は最も単純なストップウォッチを作成することなので、開始、終了、リセット機能のみが必要です。インターフェイスは以下のとおりです。

実行が開始されていません:

実行中:

2. 実装方法を考えます。

まず第一に、中心となるメソッドは間違いなく setInterval() メソッドで、これは時間を定期的に表示するために使用されます。 10ms までの精度が必要なので、時間間隔を 10 に設定します。

さらに、時間を増やすにはどうすればよいですか？

A . 私が考え始めたのは変数の設定です。ミリ秒、秒、分、時間。ミリ秒は 10 ミリ秒ごとに 1 ずつ増加します。ミリ秒 >= 100 の場合、ミリ秒のモジュロ 100 を使用し、同時に秒を 1 増やします。同様に秒が60になったところで分が 60 に達すると、分は 1 ずつ増加し、時間は 1 ずつ増加します。

ただし、形式の統一性を確保するために（2:1:24:6の代わりに02:01:24:06を表示したい）、上記と同じ考えで、4つの変数を8つの変数に変更しました。。 (コードについては、このページの最後にある「遅延付きストップウォッチ」を参照してください)。

しかし、運用中に遅延問題が発生し、遅延が蓄積していきます。時間が短い場合でも、比較的正確に実行できますが、時間が経つにつれて、ストップウォッチの時間が標準時間から大きく外れます。

B. 遅延を減らすために、別の方法を設計しました (実際には、この方法は前の方法よりも遅延が大きくなります)。現時点では、トリガー開始の記録に使用される時間変数は 1 つだけですボタンが押されてから経過したミリ秒数 (時間は 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 では各サイクルで 4 回の計算が必要となるため、時間が短い場合は効率が高くなります。 Aよりもさらに低いです。

C . 誤差なくリアルタイムに同期するために、別の方法を考えました。 JS Date オブジェクトには、getTime() というメソッドがあり、1970 年 1 月 1 日から現在までのミリ秒数を返すために使用されます。 start をクリックすると getTime() がトリガーされ、この時間を基準として getTime() が 10 ミリ秒ごとに実行され、前者から後者が減算されて相対時間が取得されます。このようにして、リアルタイムとの同期の問題は完全に解決されます。

以下の 3 つのコードを添付します:

コード 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>

ログイン後にコピー

コード 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>

ログイン後にコピー

コード 3 (時間と同期したコード)

<!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 を使用して 10 ミリ秒の精度のストップウォッチを作成します (コードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。