jQuery秒表与毫秒答案

【问题标题】：jQuery Stopwatch with millisecondsjQuery秒表与毫秒
【发布时间】：2012-03-20 05:08:25
【问题描述】：

我在 jQuery 中找到了一个有用的 JS，用于制作具有小时、分钟和秒的秒表。 http://daokun.webs.com/jquery.stopwatch.js

问题是，小时计数器对我来说没用，我宁愿显示一个毫秒计数器。我正在使用这个链接到一个按钮的 JS 来启动它：

$('.easy').click(function(){ 
$("#demo").stopwatch().stopwatch('start');});

Easy 是按钮的类，Demo 是 DIV 的 ID

<div id="demo" >00:00:00</div>

停止计数器的是进度条中的 if、else 语句：

 else{
    $("#demo").stopwatch().stopwatch('stop');           
    }

else 的代码实际上更长，一旦柱子达到 100，计数器就会停止，这意味着我用 if 和 else if 语句覆盖了从 0 到 99 的其余部分。

无论如何，如何将 JS 编辑为具有分、秒和毫秒的计数器？或者有没有其他jQuery插件有这样的计数器？

【问题讨论】：

codereview.stackexchange.com/a/48390/106949 的工作 jQuery 秒表（国际象棋计时器）小提琴演示非常棒。

标签： javascript jquery counter stopwatch

【解决方案1】：

如果您查看了代码，您会发现 defaultFormatMilliseconds() 函数，您可以对其进行修改：

    return [pad2(hours), pad2(minutes), pad2(seconds), millis].join(':');
                                                     ^^^^^^^^---add milliseconds.

【讨论】：

是的，它以毫秒为广告，现在的问题是，它们显示为毫秒 * 1000 计数器为 1:1000 2:2000 3:3000 它计算毫秒不是 1 比 1 而是 1000 到 1000

【解决方案2】：

你真的不需要使用这个插件，就像使用setInterval()制作你自己的计时器一样简单，这正是秒表插件所做的。

jsFiddle

HTML

<div id="timer"><span class="value">0</span> ms</div>

setInterval(updateDisplay, 1); // every millisecond call updateDisplay

function updateDisplay() {
    var value = parseInt($('#timer').find('.value').text(), 10);
    value++;
    $('#timer').find('.value').text(value);
}

【讨论】：

如果 updateDisplay 执行需要 2 毫秒怎么办？那么这不会变得特别准确或有用。也许这就是插件试图解决的问题。
查看秒表插件的源代码，它的作用完全相同。
问题是，我还在学习 JS 和 jQuery 代码和命令，我并没有想学的那么精明。我查看了插件源代码，发现它是这样做的，它使用 math.floor 计算秒数、分钟数等。我需要将源代码也编辑为显示毫秒。我尝试使用上面的解决方案并将它们显示为毫秒乘以 1000
在将它与实际秒表进行比较时，我发现这非常不准确，jsFiddle 示例大约需要 4 秒才能到达前 1000 毫秒。

【解决方案3】：

我尝试修改代码，以便我们可以看到精确到最后一毫秒的计数，但这只会让秒表变慢（截至目前，我不知道变慢是否是浏览器/系统硬件依赖）。

无论如何，这些代码将允许您指定高达 100 的更新间隔（因此为您提供精确到 0.0 秒的秒表，而不会减慢速度）。

编辑：我没有包含 jinvtervals.js，因此秒表将使用默认格式化程序。

Javascript：

function defaultFormatMilliseconds(x) {
    var millis, seconds, minutes, hours;
    millis = Math.floor((x % 1000) / 100);
    x /= 1000;
    seconds = Math.floor(x % 60);
    x /= 60;
    minutes = Math.floor(x % 60);
    x /= 60;
    hours = Math.floor(x % 24);
    // x /= 24;
    // days = Math.floor(x);
    return [pad2(hours), pad2(minutes), pad2(seconds)].join(':') + "." + millis;
}

HTML

<script type="text/javascript">

    $(function () {
        $('#swhTimeExposed').stopwatch({
            updateInterval: 100
        });

        $('#btnSearch').button({
            icons: {
                primary: "ui-icon-clock"
            },
            text: true
        })
            .bind('click', function (e) {
                // Start Stop watch
                $('#swhTimeExposed').stopwatch('start');
            }
        );
    });
</script>

<span id="swhTimeExposed"> 00:00:00.0 </span>
<button type="submit" id="btnSearch" >Start</button>

【讨论】：