JQuery Секундомер с миллисекундами - PullRequest
Новая
       43

JQuery Секундомер с миллисекундами

1 голос
/ 01 марта 2012

Я нашел этот полезный JS в jQuery для секундомера с часами, минутами и секундами. http://daokun.webs.com/jquery.stopwatch.js

Дело в том, что счетчик часов для меня бесполезен, я бы лучше показывал счетчик миллисекунд. Я использую этот JS, связанный с кнопкой, чтобы запустить его: 

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

Easy - это класс для кнопки, а Demo - идентификатор для DIV 

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

То, что останавливает счетчик, это оператор if, else из индикатора выполнения: 

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

Код для этого еще на самом деле длиннее, и счетчик останавливается, как только планка достигает 100, это означает, что я закрыл остаток от 0 до 99 операторами if и else if.

В любом случае, как можно отредактировать этот JS, чтобы он имел счетчик с минутами, секундами и миллисекундами? Или есть какой-нибудь другой плагин jQuery, чтобы иметь такой счетчик?

Ответы [ 3 ]

2 голосов
/ 01 марта 2012

Вам действительно не нужно использовать плагин, это так же просто, как использовать 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 голосов
/ 01 марта 2012

Если вы просмотрели код, вы найдете функцию defaultFormatMilliseconds (), которую вы можете изменить: 

    return [pad2(hours), pad2(minutes), pad2(seconds), millis].join(':');
                                                     ^^^^^^^^---add milliseconds.
1 голос
/ 18 февраля 2015

Я попытался изменить коды так, чтобы они позволяли нам видеть точный счет до последней миллисекунды, но это только замедляло работу секундомера (на данный момент я не знаю, является ли замедление браузерным / системным оборудованием зависимая).

В любом случае, эти коды позволят вам указать интервал обновления до 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>
...