DOMを使ってcountdowntimerスクリプトを表示

Question

私はDOMとHTMLとPHPの新機能をかなり使い慣れているので、これを行う方法に関するいくつかの情報を探しています。私が今まで持っているものは、JavaScriptです。今、私はこのスクリプトを表示するためにDOMを使いたい/しなければなりません。 （参考：私はMoodleのために何かを実装していますが、これはこのようにしています）

私が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.setIntervalを使用します。ここに簡単な例があります。空のhtmlページを作成し、スクリプトをheadセクションに置き、マークアップをbodyセクションに挿入します。適切なhtmlタグとbodyタグを付けて投稿できませんでした。

<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>