Question

I’m fairly new to DOM and the whole HTML and PHP Stuff so I’m seeking some information on how to do this. What I have until now is a Javascript. Now I want/have to use DOM to show this script. (FYI: I’m implementing something for Moodle and this has be done like this)

What I have found out about DOM is that I can change values of different Nodes. The problem I’ve found myself in is that all the examples I found were like. Click on a button and something happens. That’s ok but now I want my script to run every second so I can the person who needs it can see that the time is running down.

I hope I gave you enough information and I hope you can help me. Thank you for trying to help me.

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

You might want to use window.setInterval for a start. Here is a short example. Create a blank html page, put the script into the head section, and the markup into the body section. I wasn’t able to post it with proper html and body tags

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

In the HTML place these to start the timer class.

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