Показать таймер обратного отсчета с DOM - PullRequest
Новая
       1

Показать таймер обратного отсчета с DOM

1 голос
/ 18 марта 2012

Я довольно новичок в 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>

1 Ответ

0 голосов
/ 18 марта 2012

Возможно, вы захотите использовать 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>
...