Question

我正在尝试创建一个尽可能准确的秒数秒表。当然浏览器/服务器/ cpu或任何需要超过1毫秒的时间来执行该功能并在手表上显示数字。所以我想我想在每次一秒钟时将ms重置为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);

正如我已经说过的，我的目标是每次每秒钟都重置毫秒计时器。（秒是准确的，毫秒不是）。

会是这样的吗？：

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

我对javascript / jQuery和一般编程都很陌生，所以如果你可以帮我解决这个问题并且可能会提供一些反馈以便我可以改进，那将是非常好的。

Answer 1

好的我找到了一个解决方案：我刚刚添加了一个变量，就像当前秒的时间戳。它的默认值为0，如果显示中使用的秒数大于第二个时间戳，则为1。

看起来有点像这样：var secondnow = 0;（在jQuery函数之上）

这就是它的使用方式

if (seconds > secondnow) {
                    milliseconds = 0;
                    secondnow++;
                    timestampstartms = new Date().getTime();
                    console.log(secondnow);
                }

（在函数do_time中）

Jquery秒表，毫秒（准确）

1 个答案: