He estado aprendiendo javascript durante los últimos meses, así que soy un novato. Lector veterano, póster por primera vez. El código completo de lo que estoy trabajando está disponible aquí en este codepen
https://codepen.io/dconnenc/pen/yLpwrQO?editors=1011
Estoy golpeando una pared bastante mala.
Mi problema actual es mantener mi reloj manteniendo el formato mm: ss adecuado y hacer que marque las 00:00.
min = min < 10 ? "0" + min : min; sec = sec < 10 ? "0" + sec : sec;Había estado usando lo anterior, pero se volvió demasiado frágil dentro de la función de intervalo y comencé a agregar 0 al comienzo de cada intervalo. Tengo una solución para que deje de agregar ceros, pero ahora solo marca hasta las 0:00 y nunca llega a las 00:00.
sessionTime = sessionTime < 10 && !sessionTime.toString().startsWith("0") ? "0" + sessionTime : sessionTime; sec = sec < 10 && !sessionTime.toString().startsWith("0") ? "0" + sec : sec;Tengo una parada por el día y tomo un descanso, pero debajo hay un fragmento más grande del código y, por supuesto, el enlace al codepen completo está arriba.
function timer() { //ticks down timer if(sec > 0){ sec--; } else if (sec == 0 && sessionTime == 0) { console.log("check"); document.getElementById('time-left').textContent = breakTime + ":" + sec; } else if (sec == 0) { sessionTime--; sec = 59; } //mm:ss format (started running into an error with the interval returning extra 0s) sessionTime = sessionTime < 10 && !sessionTime.toString().startsWith("0") ? "0" + sessionTime : sessionTime; sec = sec < 10 && !sessionTime.toString().startsWith("0") ? "0" + sec : sec; //updates display document.getElementById('time-left').textContent = sessionTime + ":" + sec; }Prueba esto con el min y luego con los segundos
if(sessionTime.toString().length === 1){ if(sessionTime === 0){ sessionTime = sessionTime; }else{ sessionTime = "0"+sessionTime; } }Esto implementa el comportamiento esperado de su temporizador (usando un intervalo de 500 ms y "minutos" de 3 segundos) usando un ejemplo algo minimizado. El tiempo de sesión está codificado en 3 minutos.
Mezclar cadenas y números enteros en JavaScript puede conducir fácilmente a problemas de codificación como los que ha experimentado, especialmente cuando intenta usar el operador + en cadenas y números enteros mixtos. Lo mejor es evitar eso en sus variables de control y comenzar con una cadena obvia cuando esté configurando pantallas.
let oneSecond = 500; let oneMinute = 3; let sessionTime = 3; var secondsRemaining; var intervalId; function reset() { console.log('check') clearInterval(intervalId); intervalId = 0 } function start() { secondsRemaining = sessionTime * oneMinute; setTimeLeft() intervalId = setInterval(timer, oneSecond) } function timer() { if ( --secondsRemaining <= 0 ) { reset() } setTimeLeft() } function setTimeLeft() { document.getElementById('time-left').textContent = `${(''+ ~~(secondsRemaining / oneMinute)).padStart(2, '0')}:${(''+ secondsRemaining % oneMinute).padStart(2, '0')}`; } start() <span id='time-left'></span>Esta versión maneja múltiples temporizadores.
let oneSecond = 500; let oneMinute = 3; let sessionTime = 3; function Timer(seconds, resetCallback, updateCallback, period) { this.s = seconds; this.p = period || oneSecond; this.callback = resetCallback || Function.prototype; this.update = updateCallback || Function.prototype; this.reset = function() { this.intervalId = clearInterval(this.intervalId) this.callback() } this.start = function() { this.update(this.s); this.intervalId = setInterval(this.timer.bind(this), [ this.p ]) } this.timer = function() { if (--this.s <= 0) this.reset(); this.update(this.s) } } function setTimeLeft(sec, id) { document.getElementById(id || 'time-left').textContent = `${(''+ ~~(sec / oneMinute)).padStart(2, '0')}:${(''+ sec % oneMinute).padStart(2, '0')}`; } document.addEventListener("DOMContentLoaded", function() { new Timer(sessionTime * oneMinute, () => console.log('check 1000ms'), setTimeLeft, 1000).start() new Timer(6 * oneMinute, () => console.log('check 500ms'), (s) => { setTimeLeft(s, 'time-left2')}, 500).start() new Timer(15 * oneMinute, () => console.log('check 300ms'), (s) => { setTimeLeft(s, 'time-left3')}, 200).start() }) <span id='time-left'></span><br /> <span id='time-left2'></span><br /> <span id='time-left3'></span>