La cuenta regresiva de Onclick para un despertador no se detiene correctamente. Se detiene en "-1:0" y no en 0:00 como estaba previsto. Intenté resolver el problema cambiando los operadores "> < =" pero no lo entiendo bien. Quizás alguien pueda ayudarme con eso.
function startTimer() { let startTime = new Date().getTime(); let fiveMinutes = 5 * 1 * 1000; let endTime = startTime + fiveMinutes; var countdown = setInterval(function count() { let timeLeft = endTime - new Date().getTime(); let minutes = timeLeft / (1000 * 60); minutes = Math.floor(minutes); let seconds = (timeLeft / 1000) % 60; seconds = Math.round(seconds); let text = minutes + ':' + seconds; timer.innerHTML = text; if ((minutes <= 0) && (seconds <= 0)) { clearInterval(countdown); } }, 1000); } <div class="timer center margin-top" id="timer"> 00:05 </div> <div class="button center"> <img onclick="startTimer()" img src="img/btn.png" /> </div>Su problema es solo usar Math.floor(minutes) . intente usar Math.round(minutes)
este es el código para resolver su problema:
function startTimer() { let startTime = new Date().getTime(); let fiveMinutes = 5 * 1 * 1000; let endTime = startTime + fiveMinutes; var countdown = setInterval(function () { let timeLeft = endTime - new Date().getTime(); let minutes = timeLeft / (1000 * 60); minutes = Math.round(minutes); let seconds = (timeLeft / 1000) % 60; seconds = Math.round(seconds); let text = minutes + ':' + seconds; timer.innerHTML = text; if ((minutes <= 0) && (seconds <= 0)) { clearInterval(countdown); } }, 1000); } <div class="timer center margin-top" id="timer"> 00:05 </div> <div class="button center"> <img onclick="startTimer()" img src="img/btn.png" alt="button start" /> </div> function startTimer() { let startTime = new Date().getTime(); // If its five minute 5 * 60 * 1000; let fiveSeconds = 5 * 1000; let endTime = startTime + fiveSeconds; var countdown = setInterval(function count() { let timeLeft = endTime - new Date().getTime(); let minutes = Math.floor((timeLeft / (1000 * 60)) % 60); let seconds = Math.floor((timeLeft / 1000) % 60); // Once test is passed do the DOM manipulation let text = minutes + ':' + seconds; timer.innerHTML = text; if ((minutes <= 0) && (seconds === 0)) { return clearInterval(countdown); } }, 1000); } <div class="timer center margin-top" id="timer"> 5:00 </div> <div class="button center"> <button onclick="startTimer()">Start</button> </div>