HTML:
Update
Autoupdate
HTML-OUT:
<!DOCTYPE html> <html> <head> <title>Countdown mit Pause Funktion in JavaScript EDGE / Chromium / IE11</title> </head> <body style="background-color: #ffffff;"> <table align="center" border="1" > <tr> <td> <!-- Eingabefeld für Sekunden --> Sekunden:<br><input type="text" id="Sekunden" value="10" /> <br> <!-- Anzeige für den Countdown --> <span id="countdown">00:00 </span> <br> <!-- Schaltflächen für Start, Pause und Fortsetzen des Countdowns --> <button onclick="startCountdown()"> Start</button> <button onclick="pauseCountdown()"> Pause</button> <button onclick="resumeCountdown()"> Fortsetzen</button> </td> </tr> </table> <script> // Variable zur Speicherung des Intervalls für den Countdown var countdown; // Variable zur Speicherung der verbleibenden Zeit var remainingTime; // Variable, um den Status des Countdowns zu verfolgen var countdownRunning = false; // Variable zur Speicherung des Startzeitpunkts des Countdowns var startTime; // Variable zur Speicherung der pausierten Zeit var pausedTime = 0; // Funktion zum Starten des Countdowns function startCountdown() { if (!countdownRunning) { // Setzen der Countdown-Zeit remainingTime = Sekunden.value; // Speichern des Startzeitpunkts startTime = Date.now(); // Markieren des Countdowns als gestartet countdownRunning = true; // Starten des Intervalls zur Aktualisierung des Countdowns countdown = setInterval(updateCountdown, 1000); } } // Funktion zum Pausieren des Countdowns function pauseCountdown() { // Stoppen des Intervalls clearInterval(countdown); // Markieren des Countdowns als pausiert countdownRunning = false; // Berechnen der vergangenen Zeit seit dem Start pausedTime = Date.now() - startTime; } // Funktion zum Fortsetzen des Countdowns nach einer Pause function resumeCountdown() { // Berechnen des neuen Startzeitpunkts unter Berücksichtigung der pausierten Zeit startTime = Date.now() - pausedTime; // Markieren des Countdowns als fortgesetzt countdownRunning = true; // Fortsetzen des Intervalls zur Aktualisierung des Countdowns countdown = setInterval(updateCountdown, 1000); } // Funktion zur Aktualisierung des Countdowns function updateCountdown() { // Aktuelle Zeit var currentTime = Date.now(); // Berechnen der vergangenen Zeit seit dem Start in Sekunden var elapsedTime = Math.floor((currentTime - startTime) / 1000); // Überprüfen, ob die Countdown-Zeit abgelaufen ist if (elapsedTime >= remainingTime) { // Stoppen des Intervalls clearInterval(countdown); // Markieren des Countdowns als beendet countdownRunning = false; // Anzeigen der Meldung, dass der Countdown abgelaufen ist var el = document.getElementById('countdown'); el.innerHTML = 'Countdown abgelaufen'; } else { // Aktualisieren der Anzeige mit der verbleibenden Zeit var el = document.getElementById('countdown'); el.innerHTML = (remainingTime - elapsedTime) + ' Sekunden verbleibend'; } } </script> </body> </html>
---