Estoy creando un temporizador de cuenta regresiva de entrenamiento usando javascript.
este es mi codigo
var counter = 30; setInterval( function(){ counter--; if( counter >= 0 ){ id = document.getElementById("count"); id.innerHTML = counter; } if( counter === 0 ){ id.innerHTML = "REST"; } }, 1000); <div class="container"> <h1 id="count">WORK</h1> </div>La cuenta regresiva del tiempo funciona bien, pero quiero agregar una cuenta regresiva del tiempo de descanso después de un entrenamiento de 30 segundos.
Por favor ayúdenme gracias...
El siguiente código debería funcionar. Una vez que el counter de entrenamiento llega a 0, podemos cambiar al modo de descanso y descansar durante 30 segundos (también puede cambiar el tiempo de descanso del usuario). Una vez transcurridos estos 30 segundos, el temporizador volverá al modo de entrenamiento y el ciclo continuará.
Editar: podemos crear rounds variables e incrementar esta variable cada vez que ingresamos al modo de entrenamiento. Una vez que las rounds alcanzan el valor de 11, podemos usar clearInterval() para detener el código, después de establecer setInterval(function(){},1000) en una variable llamada interval .
var counter = 30; var mode = "Workout"; var rounds = 1; var interval = setInterval( function(){ counter--; if(mode == "Workout" && counter >= 0 ){ id = document.getElementById("count"); id.innerHTML = "Workout Number " + rounds + ": " + counter; } else{ id = document.getElementById("count"); id.innerHTML = "Rest: " + counter; } if( counter === 0 ){ if(mode == "Workout"){ mode = "Rest"; } else{ mode = "Workout"; rounds++; } id.innerHTML = "REST"; counter = 30; if (rounds == 11){ clearInterval(interval); } } }, 1000); <div class="container"> <h1 id="count">WORK</h1> </div>¡Espero que esto haya ayudado! Avísame si necesitas más detalles o aclaraciones :)
Debe poner la identificación fuera del alcance actual y también borrar el intervalo:
var counter = 30; var intervalId = setInterval( function(){ counter--; var id = document.getElementById("count"); if( counter >= 0 ){ id.innerHTML = counter; } if( counter === 0 ){ id.innerHTML = "REST"; clearInterval(intervalId) } }, 1000);Puede tener una función que acepte el tiempo de trainingTime y el tiempo de restTime y mostrar uno de ellos condicionalmente en cada intervalo.
function startTraining(trainingTime, restTime) { const fullTime = trainingTime + restTime var counter = 0 const display = (value) => { id = document.getElementById("count"); id.innerHTML = value; } // display the start time immediatly!. display('TRAIN: ' + fullTime) const interval = setInterval(function () { counter++; // stop training if fulltime is reached/exceeded if (counter >= fullTime) { clearInterval(interval) display('training ended') // start next training here!. // ... } else { // calculate remaining time const remainingTime = fullTime - counter // Display "TRAIN" if counter is less than needed trainingTime // else display "REST" const keyword = counter < trainingTime ? 'TRAIN' : 'REST' // update html: display(keyword + ': ' + remainingTime) } }, 1000); } const trainingTime = 15 const restTime = 15 startTraining(trainingTime, restTime) <div class="container"> <h1 id="count">WORK</h1> </div>Con el fragmento anterior también puede saber el momento exacto en que finalizó un entrenamiento.