스톱워치를 일시 중지해도 시간이 멈추지 않습니다.

여기에 자신을 명확하게 만들 수 있기를 바랍니다.스톱워치를 일시 중지해도 시간이 멈추지 않습니다.

내 스톱워치 실행하려면 다음 코드를 사용하고 있습니다 :

function timecounter(starttime) 
    { 
    currentdate = new Date(); 
    details = document.getElementById('details'); 
    stopwatch = document.getElementById('stopwatch'); 

    var timediff = currentdate.getTime() - starttime; 
    if(runningstate == 0) 
     { 
     timediff = timediff + stoptime 
     } 
    if(runningstate == 1) 
     { 
     stopwatch.value = formattedtime(timediff); 
     refresh = setTimeout('timecounter(' + starttime + ');',10); 
     } 
    else 
     { 
     window.clearTimeout(refresh); 
     stoptime = timediff; 
     } 
    } 

function startandstop() 
    { 
    var startandstop = document.getElementById('startandstopbutton'); 
    if(runningstate==0) 
{ 
startandstop.value = 'Pause'; 
runningstate = 1; 
timecounter(starttime); 
} 
else 
    { 
    startandstop.value = 'Start'; 
    runningstate = 0; 
    lapdate = ''; 
    } 
}

을하지만 시간을 일시 정지 버튼을 선택하면, 시간 정지,하지만 다시 시작 누르면, 그것은 시간에 이동하는 마치 현재 시간을 멈추지 않은 것처럼 보입니다.

나는 그 일이 무엇인지 알아 내려고 노력해 왔으며 성공하지 못했습니다.

나는 timecounter() 함수와 관련이있을 것이라고 생각하지만, 확실하지는 않습니다.

도움이 될 것입니다.

덕분에, 브랜든

출처

2013-10-14 Rock98

난 당신이 MS의 측면에서 정확에 가까운 무언가를 원하는 경우()는 .performance.now 사용한다고 생각합니다.

재미있는 문제가있어서 재미있는 솔루션을 생각해 냈습니다. 희망이 도움이됩니다. :) (강령 아래 UPDATES)

http://jsfiddle.net/colbycallahan/CjDz7/1/가 (디스플레이 조금 그것을 청소 및 비트 반올림)

작품을하고 필요 jQuery를 :

HTML :

<div id="console"></div> 
<input type="button" id="btn" value="start time"> 
<input type="button" id="btn2" value="stop time">

js :

var timerRunning = false; 
var startTime; 
var totalTime; 
$('#console').data('totalTime', 0); 

function startTimer(){ 
    totalTime = $('#console').data('totalTime'); 
    startTime = window.performance.now(); 
    timerRunning = true; 

    function timerLoop(){ 
     window.setTimeout(function(){ 
      if(timerRunning){ 
       $('#console').text(window.performance.now() - startTime + totalTime); 
       timerLoop(); 
      } 
     }, 50); 
    } 

    timerLoop();  
} 

$('#btn').on('click', function(){ 
    startTimer(); 
}); 

$('#btn2').on('click', function(){ 
    totalTime = window.performance.now() - startTime + totalTime; 
    $('#console').data('totalTime', totalTime); 
    timerRunning = false; 
});

귀하의 코드를 가져 갔고 내가 한 첫 번째 일은 if 문과 별개의 줄에 중괄호에 관한 구문상의 측면에서 오류를 일으킬 수있는 문제를 수정했습니다. 실행 상태가 0 일 때의 if 문에서 세미콜론이 누락되어 한 세미콜론이 잘못 배치되었습니다. timecounter() 호출. 함수를 문자열로 만들려고했으나 문자열에서 절대로 함수를 호출하지 않았습니다. starttime은 timecounter()의 인수로 전달하기 전에 정의되어 있지 않습니다. settimeout() 행은 조건문 외부에서 호출하여 호출해야합니다. 실행 상태가 1이 아니면 불필요하게 else를 호출합니다. lapdate는 빈 문자열이 아닌 다른 값으로 정의되지 않습니다. 또한 실행 상태가 1이 아니라면 새로 고침이 정의되지 않지만 새로 고침이 1과 같지 않을 때만 호출됩니다. 마지막으로 추가 실수가 있었는지 알기 위해 필요한 코드를 모두 포함하지 않았거나 내가 작성한 내용을 알 수있는 코드가 충분하지 않습니다. 문제가 해결 될 것이므로 새 코드를 작성해야합니다 (페이지에 jquery 라이브러리가 필요합니다). 나는 당신의 코드의 논리를 정말로 이해하지 못한다. 한 가지 더 : 사용자가 타이머를 시작하고 일시 중지를 클릭 한 다음 타이머를 다시 시작한 후 경과 된 시간의 저장된 값을 검색해야합니다. 덕분에 JSLint.com 또는 유사 사이트로 이동하여 린트 테스트를 통과 할 때까지 브라우저에서 코드를 실행하지 않아야합니다. 나는 밑바닥에서만 코드를 재 게시하고 작동하도록 기대하지는 않습니다. jquery가 필요없는 바닐라 자바 스크립트로 타이머를 재 다이얼합니다.그것은 여기에 있습니다 :

작품을 더 jQuery를 필요 없다 :은

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

    <div id="console"></div> 
    <input type="button" id="btn" value="start time" onclick="startTimer();"> 
    <input type="button" id="btn2" value="stop time" onclick="stopTimer();"> 
    <input type="hidden" id="storedTime" value="0"> 

<script> 
    var timerRunning = false; 
    var startTime; 
    var totalTime; 
    var storedTimeInp = document.getElementById('storedTime'); 
    var console = document.getElementById('console'); 

    function startTimer(){ 
     totalTime = Number(storedTimeInp.value, 10); 
     startTime = window.performance.now(); 
     timerRunning = true; 

     function timerLoop(){ 
      window.setTimeout(function(){ 
       if(timerRunning){ 
        console.innerHTML = (window.performance.now() - startTime + totalTime); 
        timerLoop(); 
       } 
      }, 50); 
     } 

     timerLoop();  
    }  

    function stopTimer(){ 
     totalTime = window.performance.now() - startTime + totalTime; 
     storedTimeInp.value = totalTime; 
     timerRunning = false; 
    } 


</script> 
</body> 
</html>

는 코드 재 작성은 일종의 (부서) : 나와 함께 다시 얻기를위한

var runningstate = 0; 

function timecounter(starttime){ 
    currentdate = new Date(); 
    details = document.getElementById('details'); 
    stopwatch = document.getElementById('stopwatch'); 

    var timediff = currentdate.getTime() - starttime; 

    setTimeout(
    if(runningstate == 0){ 
     timediff = timediff + stoptime; 
    }else{ 
     stopwatch.value = formattedtime(timediff); 
     timecounter(starttime); 
     stoptime = timediff; 
    } 
    ,10); 
} 

function startandstop(){ 
    var startandstop = document.getElementById('startandstopbutton'); 
    if(runningstate==0){ 
    startandstop.value = 'Pause'; 
    runningstate = 1; 
    starttime = new Date(); 
    starttime = starttime.getTime(); 
    timecounter(starttime); 
    }else{ 
    startandstop.value = 'Start'; 
    runningstate = 0; 
    lapdate = ''; 
    } 
}

출처

2013-10-14 15:02:47 carter

감사합니다. 나는 그것에 대해 알아볼 때 그것을 시도 할 것이다. 감사! – Rock98

카터, performance.now() 코드를 사용하여 시도하고 위의 코드 내에서 사용하는 방법을 잘 모르겠습니다. 나는 그것이 특정 밀리 세컨드 동안 설정되었음을 알지만, 나는 그것을 염려하지 않는다. 내가 현재 가지고있는 것을 가져갈 수있는 방법이 있다면, 시간을 멈추게 할 수있는 방법을 제공하십시오. 감사! – Rock98

이제 이해합니다. 나는 어떤 웹 사이트에서 스크립트를 가져 왔고 (지금은 그것을 잊어 버렸다) 그것을 사용하여 그것을 사용하려고 시도했다. 내 해킹이 그 지점을 파악하기에 충분할 정도로 나는 갈 때 배우고 있습니다 :). 내 질문과 코드를 살펴볼 시간을 내 주셔서 감사합니다. – Rock98

스톱워치를 일시 중지해도 시간이 멈추지 않습니다.

답변

관련 문제