2012-03-01 10 views
1

jQuery에서 JS, 시간, 분, 초를 갖는 스톱워치를 발견했습니다. http://daokun.webs.com/jquery.stopwatch.jsjQuery 스톱워치 (밀리 초)

시간 카운터는 나를 위해 쓸모가 없다. 오히려 밀리 초 카운터가 나타나기를 바랍니다. 내가 이것을 사용하고 가 버튼까지 연결 JS에게 그것을 시작 : 카운터가 정지 무엇

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

쉬운 버튼의 클래스 인 및 데모는 DIV

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

의 ID 인 경우 진행률 표시 줄에서, else 문 :

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 코드와 명령을 배우는 중이다. 나는 배우려고 노력하는 그 savy가 아니다. 플러그인 소스를 조사한 결과 math.floor를 사용하여 초, 분 등을 계산했습니다. 필요한 것은 소스를 편집하여 밀리 초를 표시하는 것입니다. 위의 솔루션을 사용하려고했는데 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

나는, 그것이 우리가 지난 밀리 초까지 정확하게 계산 볼 수 있도록 코드를 수정 시도 하지만 스톱워치가 느려졌습니다 (현재로서는 ' 슬로우 다운이 브라우저/시스템 하드웨어에 좌우되는지는 알 수 없습니다).

어쨌든,이 코드를 사용하면 업데이트 간격을 최대 100까지 지정할 수 있습니다 (따라서 정지 시계는 최대 0.0 초까지 느려지 지 않고 속도를 줄입니다).

EDIT : jinvtervals.js를 포함하지 않았으므로 스톱워치는 기본 포맷터를 사용합니다.

자바 스크립트 :

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>