스톱워치 (초 단위 및 밀리 초 단위)

안녕하세요. 반응하기 전에 사용자가 얼마나 빨리 반응하는지 확인하는 반응 테스트를하고 있습니다. 난 그냥 초와 밀리 초 간단한 스톱워치를 만드는 방법을 궁금해서 나중에 HTML onclick 함수를 호출 할 수 있습니다. 스톱워치 (초 단위 및 밀리 초 단위)

여기에 지금까지 내 코드입니다 :

HTML

<input type="button" class="first" value="Call" onclick="call function" />

하고 꽤 많이 ... 나는 HTML, CSS, 자바 스크립트, 조금 jQuery를 알고있다.

미리 감사드립니다.

출처

2015-01-08 Nikki

이벤트가 시작되면'setInterval()'을 사용하고, 버튼을 클릭하면 멈 춥니 다. –

여기에 자바 스크립트에 구현 된 스톱워치가 있습니다. http://stackoverflow.com/questions/20318822/how-to-create-a-stopwatch-using-javascript 그리고 멋진 데모가 있습니다. –

@Gerard Sexton 네, 훌륭합니다. 이전에 본 적이 있지만 HTML에서 시작 및 중지 함수를 호출하는 방법을 알지 못합니다. – Nikki

기본적인 시작점으로는 setInterval을 사용하여 스톱워치를 증가시키고 토글/재설정하는 추가 기능이 필요합니다.

그런 다음 (아래 당) 직접 버튼에 클릭 핸들러를 결합, 또는 수 있습니다 - 나는 자바 스크립트 자체에 결박을 추천하는 경향이있다 (예를 들면와 .onclick=function(){....})

var s = 0, 
 
    ms = 0, 
 
    sEl = document.getElementById('s'), 
 
    msEl = document.getElementById('ms'), 
 
    play = false; 
 
stopwatch = setInterval(function() { 
 
    if (!play) return; 
 
    if (ms === 99) { 
 
    s += 1; 
 
    ms = 0; 
 
    } else { 
 
    ms += 1; 
 
    } 
 
    update(); 
 

 
}, 1); 
 

 
function update() { 
 

 
    sEl.innerText = s; 
 
    msEl.innerText = ms; 
 
} 
 

 
function toggle() { 
 
    if (!play) { 
 
    s = 0, ms = 0; 
 
    update(); 
 
    } 
 
    play = !play; 
 
}

body { 
 
    font-family: arial; 
 
} 
 
#s { 
 
    font-size: 50px; 
 
} 
 
#ms { 
 
    font-size: 30px; 
 
    display:inline-block; 
 
    width:35px; 
 
} 
 
button { 
 
    border: 1px solid grey; 
 
    background: lightgrey; 
 
    padding: 10px 40px; 
 
}

<span id="s">0</span>s <span id="ms">00</span>ms 
 
<br /> 
 
<button onclick="toggle();">Toggle</button>

출처

2015-01-08 09:36:01 SW4

초가 너무 빨리 증가합니다. 거의 1/2 초. – Christian

스톱워치 (초 단위 및 밀리 초 단위)

답변

관련 문제