DOM을 사용하여 countdowntimer 스크립트 표시

Question

저는 DOM과 전체 HTML 및 PHP 항목에 대해 상당히 익숙하므로이 작업을 수행하는 방법에 대한 정보를 찾고 있습니다. 지금까지 내가 가진 것은 자바 스크립트입니다. 이제이 스크립트를 보여주기 위해 DOM을 사용하고 싶습니다. (FYI : 나는 무들을위한 무언가를 구현하고 있는데 이것은 이것처럼 할 것입니다.)

제가 DOM에 관해 알아 낸 것은 다른 노드의 값을 바꿀 수 있다는 것입니다. 내가 발견 한 문제는 내가 찾은 모든 사례가 비슷하다는 점이다. 버튼을 클릭하면 어떤 일이 발생합니다. 괜찮습니다.하지만 이제는 매 초마다 스크립트를 실행하여 필요로하는 사람이 시간이 흐르고 있음을 볼 수 있습니다.

충분한 정보를 제공해 주시면 도와 드리겠습니다. 도와 주셔서 감사합니다.

var running = false 
var endTime = null 
var timerID = null 
// totalMinutes the amount of minutes is put into 
var totalMinutes = 3; 

function startTimer() { 
    // running is being started and the current time is put into the variable 
    running = true 
    now = new Date() 
    now = now.getTime() 
    // Variable endTime gets the time plus the maximum time 
    endTime = now + (1000 * 60 * totalMinutes); 
    showCountDown() 
} 

function showCountDown() { 
    // same as startTimer, time is saved in variable now 
    var now = new Date() 
    now = now.getTime() 
    if (endTime - now <= 0) { 
     // Variable timerID gets clearTimeout -->http://de.selfhtml.org/javascript/objekte/window.htm#clear_timeout 
     clearTimeout(timerID) 
     // boolean running set to false 
     running = false 
     alert("Ihr Resultat wird nun ausgewertet!") 
    } else { 
     // delta is being calculated 
     var delta = new Date(endTime - now) 
     var theMin = delta.getMinutes() 
     var theSec = delta.getSeconds() 
     var theTime = theMin 
     // show seconds and minutes 
     theTime += ((theSec < 10) ? ":0" : ":") + theSec 
     document.getElementById('CheckResults').innerHTML = " (&Uuml;bung in " + theTime + " Minuten abgelaufen)" 
     if (running) { 
      timerID = setTimeout("showCountDown()",900) 
     } 
    } 
} 
</script> 

Answer 1

당신은 시작을 window.setInternal을을 사용할 수 있습니다. 다음은 간단한 예입니다. 빈 html 페이지를 만들고, 스크립트를 head 섹션에 넣고, 마크 업을 본문 섹션에 넣으십시오. 적절한 html 및 본문 태그로 게시 할 수 없습니다.

<script> 
    function countDownTimer(msecGranularity, output) { 
     var secRunningTime, startTime, endTime, onFinish, interval; 

     function heartBeat() { 
      var diff = endTime - new Date(); 
      output.innerHTML = diff/1000; 
      if (diff < 0) { 
       window.clearInterval(interval); 
       onFinish(); 
      }; 
     }; 

     this.start = function (secRunningTime, finishHandler) { 
      onFinish = finishHandler; 
      startTime = new Date(); 
      endTime = startTime.setSeconds(startTime.getSeconds() + secRunningTime); 
      interval = window.setInterval(heartBeat, msecGranularity); 
     } 
    }; 

    function startTimer(duration, granularity) { 
     var output = document.createElement("div"); 
     document.getElementById("timerOutputs").appendChild(output); 
     var t = new countDownTimer(granularity, output); 
     t.start(duration, function() { output.innerHTML = 'TIMER FINISHED' }); 
    }; 
</script> 

HTML 클래스에서 타이머 클래스를 시작하십시오.

<button onclick="startTimer(60,100)">Start a new 60 seconds timer with 100 msec granularity</button><br /> 
<button onclick="startTimer(600,1000)">Start a new 600 seconds timer with 1000 msec granularity</button> 

<div id="timerOutputs"> 
</div>