2012-03-01 5 views
1

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

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

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

Легко быть класс для кнопки и Demo является ID для DIV

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

Что останавливает счетчик а, если, другое заявление от бара прогресса:

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

код, что еще на самом деле больше, и счетчик останавливается, как только бар попадает 100, означает, что я прикрыла отдохнуть от 0 до 99 с операторами if и else if.

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

ответ

2

Вы действительно не событие нужно использовать плагин, это так просто используя 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); 
}​ 
+3

Что делать, если updateDisplay занимает 2 миллисекунды для выполнения? Тогда это не окажется особенно точным или полезным. * Возможно, это то, к чему пытается обратиться плагин. –

+2

Посмотрите на источник для плагина секундомера, он делает то же самое. – Gabe

+0

Дело в том, что я ВСЕГДА изучаю код и команды JS и jQuery, я не так стараюсь учиться. Я посмотрел в источник плагина и увидел, что он это делает, используя math.floor, он вычисляет секунды, минуты и т. Д. Мне нужно, чтобы отредактировать источник, чтобы также включить miliseconds. Я попытался использовать вышеприведенное решение, и он отображает их в миллисекундах, умноженных на 1000 – Marian

2

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

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

Да, это реклама в миллисекунды, проблема в настоящее время, они показывают, как миллисекунды * 1000 Счетчик Gose в 1: 1000 2: 2000 3: 3000 Рассчитывает миллиметры не как 1 до 1, но от 1000 до 1000 – Marian

1

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

В любом случае, эти коды позволят вам указать интервал обновления до 100 (поэтому дает вам стоп-часы с точностью до 0,0 секунд без замедления).

EDIT: Я не включил 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>