带有毫秒的 jQuery 秒表

问题描述 投票：0回答：5

我在 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 插件有这样的计数器？

javascript jquery counter stopwatch
5个回答
3
投票

你真的不需要使用该插件，就像使用 

setInterval()
制作自己的计时器一样简单，这正是秒表插件的作用。

jsFiddle

HTML

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

JS

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

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

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

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

我尝试修改代码，以便我们能够看到精确到最后一毫秒的计数，但这只会使秒表变慢（到目前为止，我不知道速度变慢是否与浏览器/系统硬件相关） .

无论如何，这些代码将允许您指定高达 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>
0
投票

$(document).ready(function () {
    $(".resume,.restart").hide();
    $(".present_condition").hide().first().show();
    var timer;
    var h, m, s, c = 99;

    // Start Event
    $(".start").click(function () {
        $(".present_condition").not($(".present_condition").eq(3).show()).hide();
        $(".pause,.stop,.reset").attr('disabled', false);
        startRestartInterval();
    });

    // Stop Event
    $(".stop").click(function () {
        $(".present_condition").not($(".present_condition").eq(1).show()).hide();
        $(".pause,.stop").attr('disabled', true);
        $(".reset,.restart").attr('disabled', false);
        $(".start,.resume").hide();
        $(".restart").show();
        getValues();
        pauseAt = (`STOPPED AT: ${h} HH, ${m} MM, ${s} SS.`);
        $("#stopTimeStamp").html("<p>" + pauseAt + "</p>");
        clearInterval(timer);
    });

    // Restart Event
    $(".restart").click(function () {
        $(".present_condition").not($(".present_condition").eq(3).show()).hide();
        h = m = s = c = 0;
        startRestartInterval();
        $(".pause,.stop").attr('disabled', false);
        $(".start").attr('disabled', true);
        $(".start").show();
        $(".resume,.restart").hide();
    });

    // Pause Event
    $(".pause").click(function () {
        getValues();
        pauseAt = "PAUSE AT: " + h + " HH, " + m + " MM, " + s + " SS.";
        $(".pauseValue").css("color", "blue").text(pauseAt);
        $("#pauseTimeStamp").append("<p>" + pauseAt + "</p>");
        $(".present_condition").not($(".present_condition").eq(2).show()).hide();
        $(".start,.restart").hide();
        $(".resume").show();
        $(".pause").attr('disabled', true);
        $(".resume").attr('disabled', false);
        clearInterval(timer);
    });

    // Resume Event
    $(".resume").click(function () {
        getValues();
        startRestartInterval();
        $(".start").show();
        $(".resume,.restart").hide();
        $(".pause,.stop").attr('disabled', false);
        $(".start").attr('disabled', true);
        $(".present_condition").not($(".present_condition").eq(3).show()).hide();
    });

    // Reset Event
    $(".reset").click(function () {
        clearInterval(timer);
        $("#pauseTimeStamp,#stopTimeStamp").empty();
        $("th").text("00");
        $(".start").show();
        $(".resume,.restart").hide();
        $(".pause,.stop,.reset").attr('disabled', true);
        $(".start").attr('disabled', false);
        $(".present_condition").hide().first().show();
    });

    // Functions
    function startRestartInterval() {
        timer = setInterval(function () {
            if (c < 99) {
                c++;
            }
            else {
                c = 0;
                if (s < 59) {
                    s++;
                } else {
                    s = 0;
                    if (m < 59) {
                        m++;
                    } else {
                        m = 0;
                        if (h < 59) {
                            h++;
                        }
                    }
                }
            }
            $("th").eq(0).text((h < 10) ? ("0" + h) : h);
            $("th").eq(1).text((m < 10) ? ("0" + m) : m);
            $("th").eq(2).text((s < 10) ? ("0" + s) : s);
            $("th").eq(3).text((c < 10) ? ("0" + c) : c);
        }, 10);
    }
    function getValues() {
        h = parseInt($("#hr").text());
        m = parseInt($("#min").text());
        s = parseInt($("#sec").text());
        c = parseInt($("#cSec").text());
    }
});
.btn {
  margin-top: 10px;
}
.green {
  color: #b58b00;
}
.blue {
  color: #005ce6;
}
.red {
  color: red;
}
.dark {
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class="heading">
        <h1>STOPWATCH</h1>
    </div>
    <div class="timeBar">
        <table>
            <tr>
                <th class="time_slot" id="hr">00</th>
                <th class="time_slot" id="min">00</th>
                <th class="time_slot" id="sec">00</th>
                <th class="time_slot" id="cSec">00</th>
            </tr>
            <tr>
                <td class="heading_slot">Hours</td>
                <td class="heading_slot">Minutes</td>
                <td class="heading_slot">Seconds</td>
                <td class="heading_slot">C-Seconds</td>
            </tr>
        </table>
    </div>
    <div class="buttonBar">
        <button type="button" disabled class="btn restart green">Restart</button>
        <button type="button" class="btn start green">Start</button>
        <button type="button" disabled class="btn resume green">Resume</button>
        <button type="button" disabled class="btn pause blue">Pause</button>
        <button type="button" disabled class="btn stop red">Stop</button>
        <button type="button" disabled class="btn reset dark">Reset</button>
    </div>
    <div class="messageBar">
        <h4 class="dark present_condition">ENTER TIME & HIT START..!</h4>
        <h4 class="red present_condition">STOPPED</h4>
        <h4 class="present_condition"><span class="pauseValue"></span></h4>
        <h4 class="green present_condition">RUNNING...</h4>
    </div>
    <div class="blue history" id="pauseTimeStamp"></div>
    <div class="red history" id="stopTimeStamp"></div>
</body>

0
投票

对于未来的搜索者：接受的答案有评论，指出在实施过程中速度慢得无法使用。然而，通过一些调整就可以使其可用。第一个是使计数引用现在与给定起点之间的差异，而不仅仅是在每次迭代时添加一个。这适应了每次迭代之间可变的实际经过的毫秒数。此外，在每次迭代中查找控件相对昂贵，而为同一控件创建常量句柄则不然。

// Get a const starting reference point
const startTime = Date.now();
// Get a const handle to control
const theControl = $('#timer').find('.value'); // or just $( '.value' )
// Start the interval with a better setTimeout instead
// of setInterval which could interrupt async ops and do bad things
updateDisplay();

function updateDisplay(){
  const value = Date.now() - startTime;
  theControl.text( value );
  setTimeout( () => updateDisplay(), 1 );
}

通过此实现，它可以响应并反映实际经过的时间。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.