Tengo una barra de progreso animada asociada con un temporizador de cuenta regresiva.
Actualmente, la animación de la barra de progreso es discreta .
¿Cómo hago para que sea continuo sin cambiar otra lógica en el código ?
Además, ¿es posible crear el temporizador con requestAnimationFrame (como la forma en que se crea la barra de progreso animada) en lugar del setInterval actual?
var timer = null; var progress_bar = null; var timePassed; var TIME_LIMIT; var timeLeft; function startTimerAndProgressbar() { timePassed = 0; TIME_LIMIT = 10; timeLeft = TIME_LIMIT; startTimer(); id("progress-bar").style.visibility = "visible"; progress_bar = requestAnimationFrame(updateProgressBar); } function pauseTimerAndProgressbar() { clearInterval(timer); pauseProgressBar(); id("pause-btn").disabled = true; id("resume-btn").disabled = false; } function resumeTimerAndProgressbar() { startTimer(); resumeProgressBar(); id("pause-btn").disabled = false; id("resume-btn").disabled = true; } /* HELPER FUNCTION */ function id(id) { return document.getElementById(id); } /* PROGRESS BAR */ function updateProgressBar() { var timeFraction = timeLeft / TIME_LIMIT; id("progress-bar-inner").style.width = timeFraction * 100 + "%"; progress_bar = requestAnimationFrame(updateProgressBar); if (id("progress-bar-inner").style.width <= 0) { pauseProgressBar(); } } function pauseProgressBar() { cancelAnimationFrame(progress_bar); } function resumeProgressBar() { progress_bar = requestAnimationFrame(updateProgressBar); } /* TIMER */ function startTimer() { id("timer").textContent = formatTime(timeLeft); timer = setInterval(function() { timePassed = timePassed += 1; timeLeft = TIME_LIMIT - timePassed; id("timer").textContent = formatTime(timeLeft); if (timeLeft == 0) { clearInterval(timer); } }, 1000); } function formatTime(time) { var m = Math.floor(time / 60); var s = time % 60; m = (m < 10) ? ("0" + m) : m; s = (s < 10) ? ("0" + s) : s; return `${m}:${s}`; } #timer { font-size: 25px; font-weight: bold; } #progress-bar { visibility: hidden; width: 100%; margin: 25px auto; border: solid 1px #000; border-radius: 10px; } #progress-bar-inner { height: 15px; border-radius: 10px; width: 100%; background-color: orange; } <p id="timer"></p> <div id="progress-bar"> <div id="progress-bar-inner"></div> </div> <br> <button onclick="startTimerAndProgressbar()" id="start-btn">Start</button> <button onclick="pauseTimerAndProgressbar()" id="pause-btn">Pause</button> <button onclick="resumeTimerAndProgressbar()" id="resume-btn" disabled>Resume</button>Agregar transition: width 1s; a su #progress-bar-inner :
var timer = null; var progress_bar = null; var timePassed; var TIME_LIMIT; var timeLeft; function startTimerAndProgressbar() { timePassed = 0; TIME_LIMIT = 10; timeLeft = TIME_LIMIT; startTimer(); id("progress-bar").style.visibility = "visible"; progress_bar = requestAnimationFrame(updateProgressBar); } function pauseTimerAndProgressbar() { clearInterval(timer); pauseProgressBar(); id("pause-btn").disabled = true; id("resume-btn").disabled = false; } function resumeTimerAndProgressbar() { startTimer(); resumeProgressBar(); id("pause-btn").disabled = false; id("resume-btn").disabled = true; } /* HELPER FUNCTION */ function id(id) { return document.getElementById(id); } /* PROGRESS BAR */ function updateProgressBar() { var timeFraction = timeLeft / TIME_LIMIT; id("progress-bar-inner").style.width = timeFraction * 100 + "%"; progress_bar = requestAnimationFrame(updateProgressBar); if (id("progress-bar-inner").style.width <= 0) { pauseProgressBar(); } } function pauseProgressBar() { cancelAnimationFrame(progress_bar); } function resumeProgressBar() { progress_bar = requestAnimationFrame(updateProgressBar); } /* TIMER */ function startTimer() { id("timer").textContent = formatTime(timeLeft); timer = setInterval(function() { timePassed = timePassed += 1; timeLeft = TIME_LIMIT - timePassed; id("timer").textContent = formatTime(timeLeft); if (timeLeft == 0) { clearInterval(timer); } }, 1000); } function formatTime(time) { var m = Math.floor(time / 60); var s = time % 60; m = (m < 10) ? ("0" + m) : m; s = (s < 10) ? ("0" + s) : s; return `${m}:${s}`; } #timer { font-size: 25px; font-weight: bold; } #progress-bar { visibility: hidden; width: 100%; margin: 25px auto; border: solid 1px #000; border-radius: 10px; } #progress-bar-inner { height: 15px; border-radius: 10px; width: 100%; background-color: orange; transition: width 1s; } <p id="timer"></p> <div id="progress-bar"> <div id="progress-bar-inner"></div> </div> <br> <button onclick="startTimerAndProgressbar()" id="start-btn">Start</button> <button onclick="pauseTimerAndProgressbar()" id="pause-btn">Pause</button> <button onclick="resumeTimerAndProgressbar()" id="resume-btn" disabled>Resume</button>La función setInterval timer opera en segundos. Debe cambiar el intervalo y, por lo tanto, cambiar el valor de TIMELIMIT para que coincida.
var timer = null; var progress_bar = null; var timePassed; var TIME_LIMIT; var timeLeft; function startTimerAndProgressbar() { timePassed = 0; TIME_LIMIT = 10; timeLeft = TIME_LIMIT*100; startTimer(); id("progress-bar").style.visibility = "visible"; progress_bar = requestAnimationFrame(updateProgressBar); } function pauseTimerAndProgressbar() { clearInterval(timer); pauseProgressBar(); id("pause-btn").disabled = true; id("resume-btn").disabled = false; } function resumeTimerAndProgressbar() { startTimer(); resumeProgressBar(); id("pause-btn").disabled = false; id("resume-btn").disabled = true; } /* HELPER FUNCTION */ function id(id) { return document.getElementById(id); } /* PROGRESS BAR */ function updateProgressBar() { var timeFraction = timeLeft / (TIME_LIMIT*100); id("progress-bar-inner").style.width = timeFraction * 100 + "%"; progress_bar = requestAnimationFrame(updateProgressBar); if (id("progress-bar-inner").style.width <= 0) { pauseProgressBar(); } } function pauseProgressBar() { cancelAnimationFrame(progress_bar); } function resumeProgressBar() { progress_bar = requestAnimationFrame(updateProgressBar); } /* TIMER */ function startTimer() { id("timer").textContent = formatTime(timeLeft); timer = setInterval(function() { timePassed += 1; timeLeft = TIME_LIMIT*100 - timePassed; id("timer").textContent = formatTime(Math.ceil(timeLeft/100)); if (timeLeft == 0) { clearInterval(timer); } }, 10); } function formatTime(time) { var m = Math.floor(time / 60); var s = time % 60; m = (m < 10) ? ("0" + m) : m; s = (s < 10) ? ("0" + s) : s; return `${m}:${s}`; } #timer { font-size: 25px; font-weight: bold; } #progress-bar { visibility: hidden; width: 100%; margin: 25px auto; border: solid 1px #000; border-radius: 10px; } #progress-bar-inner { height: 15px; border-radius: 10px; width: 100%; background-color: orange; } <p id="timer"></p> <div id="progress-bar"> <div id="progress-bar-inner"></div> </div> <br> <button onclick="startTimerAndProgressbar()" id="start-btn">Start</button> <button onclick="pauseTimerAndProgressbar()" id="pause-btn">Pause</button> <button onclick="resumeTimerAndProgressbar()" id="resume-btn" disabled>Resume</button>