JavaScript countdown hinzufügen von start-und reset-Tasten

Ich wollen, verwenden Sie die folgende, um den code zu starten, nur durch das drücken einer Taste, anstatt den code ab, der auf seine eigene, wenn die Seite geladen wird. auch das hinzufügen einer reset-Taste zu.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var interval;
    var minutes = 5;
    var seconds = 10;
    window.onload = function() {
        countdown('countdown');
    }

    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    alert(el.innerHTML = "countdown's over!");                    
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }
</script> 
</head>

<body>
<div id='countdown'></div>
</body>
</html>
Bitte haben Sie einen Blick auf jsfiddle.net/dGV4a.
danke 😀

InformationsquelleAutor jennifer | 2011-03-19

  1. 3

    statt onload verwenden Sie diese

    <input type="button" onclick="countdown('countdown');" value="Start" />

    zum zurücksetzen verwenden Sie diese

    <input type="button" onclick="minutes=5;seconds=10;" value="Reset" />

    InformationsquelleAutor strauberry

  2. 3

    Den code, löst den countdown hier:

    window.onload = function() {
    countdown('countdown');
}

    stattdessen können Sie löschen, und inline-ein-Taste in der Inhalt, löst den countdown mit einem onclick-Verhalten:

    <a href="javascript:void(0);" onclick="countdown('countdown')">Click Me to Start</a>

    Wird der timer gespeichert ist in Ihrer

    var interval;

    Ihn zu stoppen, können Sie eine andere Taste, die Anrufe clearInterval(interval):

    <a href="javascript:void(0);" onclick="clearInterval(interval)">Click Me to Stop</a>

    Zurücksetzen, zu tun, was der andere vorschlug, und speichern Sie einen neuen Wert in Minuten, Sekunden 🙂

    InformationsquelleAutor jbrookover

  3. 0

    müssen Sie die zwei Tasten:

    <input type="button" value="reset" id="reset" />
<input type="button" value="start" id="start" />

    und javascript für Sie:

    var reset = document.getElementById('reset');
reset.onclick = function() {
    minutes = 5;
    seconds = 10;
    clearInterval(interval);
    interval = null;
}

var start = document.getElementById('start');
start.onclick = function() {
    if (!interval) {
        countdown('countdown');
    }
}

    Beispiel hier

    InformationsquelleAutor Teneff

  4. 0

    Sekunden = 60;

    Haben Sie zum zurücksetzen der Sekunden auf 59, da ansonsten zählen Sie 60 zweimal. Einmal mit 0 und einmal mit der 60.

    InformationsquelleAutor

Schreibe einen Kommentar