Countdown
Zu Abschnitt Timer und Countdown mit clearTimeout mit setTimeout()
<div class="counterbox"> <div class="circle">10</div> <div style="display:flex; flex-wrap:nowrap;"> <button class="btn" id="countStart">Countdown</button> <button class="btn" id="countCancel">Cancel</button> </div> </div>
10
// Globale Variablen für den Countdown- und den Cancel-Button const countStart = document.querySelector("#countStart"); const countCancel = document.querySelector("#countCancel"); // Der Countdown beginnt bei 10 und wird in den Kreis eingesetzt const start = 10; document.querySelector(".circle").textContent = 10; /*********************************************** function countdown time : Zähler, wird in countdown um 1 runtergezählt hue : Farbton, wird in countdown um jeweils 60 erhöht ***********************************************/ function countdown(time,hue) { document.querySelector(".circle").textContent = time; document.querySelector(".circle").setAttribute ("style", `border-color: hsl(${hue},85%,60%); color: hsl(${hue},85%,60%)`); time -= 1; hue += 60; // Solange time >= 0, wird setTimeout erneut aufgerufen if (time >= 0) { // Callback-Funktion countdown, mit Verzögerung von 1s, // dem aktuellen Wert von time und von hue const timer = setTimeout(countdown, 1000, time, hue); } } // Event Listener wartet auf den Klick auf den Countdown-Button countStart.addEventListener("click", function(time, hue) { countdown(start, 30); }); // Event Listener wartet auf einen Klick auf den Cancel-Button countCancel.addEventListener("click", function() { clearTimeout(timer); });