초시계에 밀리 초를 어떻게 표시합니까?

Javascript를 사용하여 스톱워치를 구현하고 있습니다. 나는 기본적인 HTML 문서 설정과 다음 코드가있는 stopwatch.js라는 javascript 파일을 가지고있다. 나는 setInterval 함수를 사용하여 1 초 (1000ms)마다 clockRunning 함수를 실행한다. 이것은 초, 분 및 시간에 따라 그들을 제어 할 수있게 해주지 만, 스톱워치에 밀리 세컨드를 삽입하는 데 어려움을 겪고 있습니다. 밀리 초를 0에서 1000까지 증가시킨 다음 0으로 리셋해야합니까?초시계에 밀리 초를 어떻게 표시합니까?

I가 setInterval 함수의 시간 간격을 감소시킴으로써 시도마다이 1ms라고하고 time 변수 1 함수가 호출 될 때마다 증가되는 time%1000에 millisecond 변수를 설정한다. 그러나 그것은 내가 원하는 결과를주지 못한다. millisecond은 너무 느리게 증가하는 것처럼 보입니다.

var running = 0 
 
var time = 0; 
 
var hour = 0; 
 
var min = 0; 
 
var sec = 0; 
 
var millisec = 0; 
 

 

 
function start(){ 
 
\t started = window.setInterval(clockRunning, 1000); \t 
 
} 
 

 
function stop(){ 
 
\t window.clearInterval(started); 
 
} 
 

 
function clockRunning(){ 
 
\t time++; 
 
\t sec++; 
 
\t if (sec == 60){ 
 
\t \t min += 1; 
 
\t \t sec = 0; 
 
\t if (min == 60){ 
 
\t \t hour += 1; 
 
\t \t min = 0; 
 
\t } 
 
\t 
 
\t 
 
\t } 
 

 
\t document.getElementById("display-area").innerHTML = (hour ? (hour > 9 ? hour : "0" + hour) : "00") 
 
\t + ":" + (min ? (min > 9 ? min : "0" + min) : "00") + ":" + (sec > 9 ? sec : "0" 
 
\t \t + sec); 
 
};

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Stopwatch</title> 
 
     <script src="stopwatch.js"></script> 
 
     <style> 
 
      #display-area { font-size: 20pt; } 
 
     </style> 
 

 
    </head> 
 
    <body> 
 
     <div> 
 
      <output id="display-area">00:00:00.000</output> 
 
     </div> 
 
     <div> 
 
      <button id="toggle-button" onClick="start()">Start</button> 
 
      <button id="toggle-button" onClick="stop()">Stop</button> 
 
      <button id="reset-button">Reset</button> 
 
     </div> 
 
    </body> 
 
</html>

출처

2014-10-12 Zip

https://gist.github.com/electricg/4372563 – andrew

당신은 다음 Date 사용하여 현재 시간에서 시간을 빼기 시작 시간을 추적한다 : 당신이 있었다

var timeBegan = null 
 
    , timeStopped = null 
 
    , stoppedDuration = 0 
 
    , started = null; 
 

 
function start() { 
 
    if (timeBegan === null) { 
 
     timeBegan = new Date(); 
 
    } 
 

 
    if (timeStopped !== null) { 
 
     stoppedDuration += (new Date() - timeStopped); 
 
    } 
 
    console.log(stoppedDuration); 
 

 
    started = setInterval(clockRunning, 10); \t 
 
} 
 

 
function stop() { 
 
    timeStopped = new Date(); 
 
    clearInterval(started); 
 
} 
 
    
 
function reset() { 
 
    clearInterval(started); 
 
    stoppedDuration = 0; 
 
    timeBegan = null; 
 
    timeStopped = null; 
 
    document.getElementById("display-area").innerHTML = "00:00:00.000"; 
 
} 
 

 
function clockRunning(){ 
 
    var currentTime = new Date() 
 
     , timeElapsed = new Date(currentTime - timeBegan - stoppedDuration) 
 
     , hour = timeElapsed.getUTCHours() 
 
     , min = timeElapsed.getUTCMinutes() 
 
     , sec = timeElapsed.getUTCSeconds() 
 
     , ms = timeElapsed.getUTCMilliseconds(); 
 

 
    document.getElementById("display-area").innerHTML = 
 
     (hour > 9 ? hour : "0" + hour) + ":" + 
 
     (min > 9 ? min : "0" + min) + ":" + 
 
     (sec > 9 ? sec : "0" + sec) + "." + 
 
     (ms > 99 ? ms : ms > 9 ? "0" + ms : "00" + ms); 
 
};

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Stopwatch</title> 
 
     <style> 
 
      #display-area { font-size: 20pt; } 
 
     </style> 
 

 
    </head> 
 
    <body> 
 
     <div> 
 
      <output id="display-area">00:00:00.000</output> 
 
     </div> 
 
     <div> 
 
      <button id="toggle-button" onClick="start()">Start</button> 
 
      <button id="toggle-button" onClick="stop()">Stop</button> 
 
      <button id="reset-button" onClick="reset()">Reset</button> 
 
     </div> 
 
    </body> 
 
</html>

이유를 이전에 밀리 초가 "지연"되었음을 확인했습니다. 그 setInterval은 정확히 말하면 을 지정하지 않으면 악명이 높습니다. 위의 전략을 사용하여이 문제를 해결할 수 있습니다.

업데이트 : 재설정 사이에 타이머가 "일시 중지"된 시간을 추적 할 수 있습니다. 이 문제를 해결하기 위해 내 대답이 업데이트되었습니다.

출처

2014-10-12 21:26:18

감사합니다. 이 작품! – Zip

여기에 문제가 있습니다. 'clearInterval'이 시계를 멈추더라도 카운팅은 멈추지 않는 것 같습니다. 나는'stop'을 클릭하고 몇 초 후에'start'를 다시 클릭했고 이번에는 이미 몇 초가지나 갔다. 다시 시작하지 않거나 정지 한 시점부터 다시 시작한다는 뜻입니다. 이'resume' 함수를 구현하는 방법에 대한 아이디어는? – Zip

거룩한 연기! 이것은 지금 일하고있다 :) 도움에 감사드립니다! – Zip

초시계에 밀리 초를 어떻게 표시합니까?

답변

관련 문제