Así que estoy haciendo un temporizador en html y javascript y lo estoy mostrando en un botón. Quiero hacer que cuando el valor del tiempo sea igual a cero, avise al usuario. Aquí está mi código hasta ahora. por cierto, el código es parte del código del temporizador.
const time2= document.getElementById("countdown") if(time2==0:00) alert("You have ran out of time, better luck next time!")¿algo como esto?
let div = document.getElementById('count') let countdown = 10 let stopper = setInterval(myTimer, 1000) function myTimer() { countdown-- div.innerHTML = countdown + " seconds left" if (countdown == 0) { clearInterval(stopper) } } <div id='count'>10 seconds left</div>Puede crear un temporizador con un setInterval () y activar alguna funcionalidad cuando se alcanza un valor, en este caso, el temporizador se borra, espero que esto ayude:
const createTimer = (num) => { const timer = setInterval(() => { console.log(num) num--; if(num == 0) { console.log("You have ran out of time, better luck next time!") clearInterval(timer) } }, 1000) } createTimer(4)Aquí hay una posible implementación de un temporizador muy simple usando una class . Lo más importante es setInterval() que le permitirá ejecutar una función cada x milisegundos.
Este temporizador utiliza una función de devolución de llamada onUpdate(seconds) que se llama cada vez que se actualiza el temporizador y proporciona los segundos restantes como parámetro. Ciertamente podría extenderse en eso.
También es necesario esperar a que se haya cargado el documento HMTL antes de intentar acceder al DOM mediante el evento DOMContentLoaded .
class Timer { #interval; #initial; #seconds; constructor(seconds, onUpdate) { this.#initial = seconds; this.#seconds = seconds; this.onUpdate = onUpdate; this.onUpdate(seconds); } start() { this.#interval = setInterval(() => { this.#seconds--; if (this.#seconds === 0) this.stop(); this.onUpdate(this.#seconds); }, 1000); } reset() { this.stop(); this.#seconds = this.#initial; this.onUpdate(this.#seconds); } stop() { clearInterval(this.#interval); this.onUpdate(this.#seconds); } } // wait for HTML document to load window.addEventListener("DOMContentLoaded", e => { const startBtn = document.getElementById("start"); const stopBtn = document.getElementById("stop"); const resetBtn = document.getElementById("reset"); // create a timer and assign it seconds as well as a callback function that is called every second const timerDiv = document.getElementById("countdown"); const timer = new Timer(5, (seconds) => { // called every seconds with seconds to go as an argument timerDiv.textContent = `${seconds}s to go` }) // add event listeners to buttons startBtn.addEventListener("click", () => timer.start()); stopBtn.addEventListener("click", () => timer.stop()); resetBtn.addEventListener("click", () => timer.reset()); }) <div id="countdown"></div> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button>