0

できるだけ正確なミリ秒単位のストップウォッチを作成しようとしています。もちろん、ブラウザ/サーバー/CPUなどは、機能を実行して時計に数字を表示するのに1ミリ秒以上必要です。だから私は秒が上がるたびにミリ秒を0にリセットしたいと思った。jQuery コードは次のようになります。

(function($) {
    $.fn.stopwatch = function() {

        // The Element where the HTML code is added
        var clock = $(this);

        var timestamprunningms;
        var timestampstartms;

        var milliseconds = 0;
        // Predefinition of the timestamprunningseconds variable
        var timestamprunningseconds;

        var display = clock.find("#display");

        var time = clock.find("#time");

        // Predefinition of the seconds variable 
        // Value 0 because it is used to define
        // The timestampstartseconds variable in the click-event
        var seconds = 0;

        // Predefinition for the timestampstartseconds variable
        var timestampstartseconds;

        // Predefinition for the timer variable
        var timer;

        // Time Variables
        var h = clock.find("#h");
        var m = clock.find("#m");
        var s = clock.find("#s");
        var ms = clock.find("#ms");

        // Button Variables
        var resetlog = clock.find("#resetlog")
        var showms = clock.find("#showms")
        var hidems = clock.find("#hidems")
        var start = clock.find("#start");
        var pause = clock.find("#pause");
        var reset = clock.find("#reset");
        var log = clock.find("#log");

        ms.hide();
        resetlog.click(function (){
            time.html("");
        });

        // Hides the pause and hidems Button
        pause.hide();
        hidems.hide();
        // Triggered by clicking the start button
        start.click(function() {

            // Hides the start and shows the pause button
            start.hide(),
            pause.show(),

            // Defines the value of timestampstartseconds or saves it 
            // if there is a value in seconds
            timestampstartseconds = Math.round(new Date().getTime() / 1000) - seconds;
            timestampstartms = new Date().getTime() - milliseconds;
            timer = setInterval(do_time, 20);
        });

        // Triggered by clicking the pause button
        pause.click(function() {

            // Resets the interval in which the do_time function occurs
            clearInterval(timer),

            // Hides the pause and shows the start button
            pause.hide(),
            start.show(),
            timer = 0;
        });

        // Triggered by clicking the reset button
        reset.click(function() {

            // Resets the interval in which the do_time function occurs
            clearInterval(timer),

            // Resets the value of the display
            h.html("00"),
            m.html("00"),
            s.html("00"),
            ms.html("000")

            // Hides the pause and shows the start button
            pause.hide(),
            start.show();
            seconds = 0;


        });

        log.click(function() {
            time.append("<li>" + display.text() + "</li>");
        });
        // The function for calculating the seconds/minutes/hours

        showms.click(function() {
            showms.hide();
            hidems.show();
            ms.show();

        });

        hidems.click(function() {
            hidems.hide();
            showms.show();
            ms.hide();

        });
        function do_time() {

            // Timestamp that refreshes everytime the function is executed
            timestamprunningseconds = Math.round(new Date().getTime() / 1000);
            timestamprunningms = new Date().getTime();
            // The actual seconds that are going to be displayed
            milliseconds = timestamprunningms - timestampstartms;
            seconds = timestamprunningseconds - timestampstartseconds;

            // Value of the display
            var hour = parseFloat(h.text());
            var minute = parseFloat(m.text());
                if (milliseconds > 999) {
                    milliseconds = 0;
                    timestampstartms = new Date().getTime();
                }

                // Reset seconds display and add a minute every time 60 seconds pass
                if (seconds > 59) {
                    seconds = 0;
                    timestampstartseconds = Math.round(new Date().getTime() / 1000);
                    minute++;

                }

                // Reset minute display and add an hour every time 60 minutes pass
                if (minute > 59) {
                    minute = 0;
                    hour++;

                }

                // Display value
                 h.html("0".substring(hour >= 10) + hour);
                 m.html("0".substring(minute >= 10) + minute);
                 s.html("0".substring(seconds >= 10) + seconds.toString());
                 ms.html(":" + "0".substring(milliseconds >= 100) +"0".substring(milliseconds >= 10) + milliseconds.toString());
            };
        };

})(jQuery);

すでに述べたように、私の目標は、1 秒が経過するたびにミリ秒タイマーをリセットすることです。(秒は正確ですが、ミリ秒は正確ではありません)。

それはこのようなものでしょうか?:

while (seconds++) {
                    milliseconds = 0;
                    timestampstartms = new Date().getTime();
                }

私はjavascript/jQueryとプログラミング全般に本当に慣れていないので、この問題を手伝ってくれて、改善できるように少しフィードバックをいただければとてもうれしいです。

4

1 に答える 1