Aplicación de temporizador con JavaScript - Programar tiempo restante
En este post sobre programación web y JavaScript te mostraré cómo hacer un temporizador usando JS puro sin ningún framework. Básicamente será una cuenta regresiva.
Le daremos al usuario la posibilidad de elegir los minutos y los segundos para comenzar la cuenta regresiva, el temporizador comenzará (se puede pausar en cualquier momento) y cuando llegue a 0 va a reproducir un sonido de alarma.
Todo esto lo haremos usando solo HTML, CSS y JavaScript.
Antes de pasar al código te voy a explicar cómo es que he creado este temporizador. Lo que hago es trabajar con fechas o mejor dicho con objetos de tipo Date ya que estas fechas permiten trabajar con una precisión de milisegundos.
En cuanto el usuario inicia el temporizador, se calcula la fecha del futuro en la que se va a detener el temporizador, sumando a la fecha actual los minutos y segundos.
Después iniciamos un setInterval que va a estar verificando si el tiempo ya se ha terminado cada 50 milisegundos.
Para comprobar si el tiempo ha acabado vamos a calcular la diferencia de la fecha del futuro (en la que acaba el temporizador) con la fecha actual y en caso de que el tiempo sea menor o igual a cero indicaremos que el tiempo se ha terminado.
También he programado este temporizador en JS de modo que se pueda pausar, reanudar y detener. Para el caso de pausarlo se guarda el tiempo que restaba para que se sume al momento de reanudar.
Lo demás es ocultar y mostrar elementos, escuchar el clic de botones, transformar milisegundos a minutos y segundos, etcétera. Todo esto te lo explico con palabras pero igualmente está plasmado en el código.
Por cierto recuerda que también se reproduce un sonido cuando la cuenta regresiva termina, esto se logra usando una función que ya expliqué anteriormente para cargar un audio con JavaScript.
Nota: estos conceptos igualmente los apliqué cuando hice un cronómetro con JavaScript.
Comencemos viendo el código de la estructura de toda nuestra app. Se compone de algunos botones y contenedores de campos de formulario así como de un contenedor para el tiempo restante.
Estoy importando el framework CSS de Bulma para darle un poco de estilo, así como los iconos de Material Design.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temporizador con JavaScript - By Parzibyte</title>
<link rel="stylesheet" href="https://unpkg.com/bulma">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css">
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<section class="section">
<div class="columns is-centered">
<div class="column has-text-centered">
<div id="contenedorInputs">
<div class="field">
<label class="label">Minutos</label>
<div class="control">
<input class="input" id="minutos" type="number" placeholder="Minutos">
</div>
</div>
<div class="field">
<label class="label">Segundos</label>
<div class="control">
<input class="input" id="segundos" type="number" placeholder="Segundos">
</div>
</div>
</div>
<h2 id="tiempoRestante">00:00.0</h2>
<button id="btnIniciar" class="button is-success"><span class="mdi mdi-play"></span></button>
<button id="btnPausar" class="button is-success"><span class="mdi mdi-pause"></span></button>
<button id="btnDetener" class="button is-success"><span class="mdi mdi-stop"></span></button>
<br>
<a href="https://parzibyte.me/blog">Creado por Parzibyte</a>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>Por cierto fíjate en que también estoy importando al script que es el que se encarga de manejar todos los eventos de esta aplicación web y de llevar le control del temporizador escrito con JavaScript.
Ahora veamos las funciones que trabajan con la cuenta regresiva que he implementado. Lo único que hacen es lo que ya expliqué anteriormente, pero ahora te lo muestro con código:
const iniciarTemporizador = (minutos, segundos) => {
ocultarElemento($contenedorInputs);
mostrarElemento($btnPausar);
ocultarElemento($btnIniciar);
ocultarElemento($btnDetener);
if (fechaFuturo) {
fechaFuturo = new Date(new Date().getTime() + diferenciaTemporal);
console.log("Reanudar con diferencia de " + diferenciaTemporal);
diferenciaTemporal = 0;
} else {
console.log("Iniciar");
const milisegundos = (segundos + (minutos * 60)) * 1000;
fechaFuturo = new Date(new Date().getTime() + milisegundos);
}
clearInterval(idInterval);
idInterval = setInterval(() => {
const tiempoRestante = fechaFuturo.getTime() - new Date().getTime();
if (tiempoRestante <= 0) {
console.log("Tiempo terminado");
clearInterval(idInterval);
sonido.play();
ocultarElemento($btnPausar);
mostrarElemento($btnDetener);
} else {
$tiempoRestante.textContent = milisegundosAMinutosYSegundos(tiempoRestante);
}
}, 50);
};
const pausarTemporizador = () => {
ocultarElemento($btnPausar);
mostrarElemento($btnIniciar);
mostrarElemento($btnDetener);
diferenciaTemporal = fechaFuturo.getTime() - new Date().getTime();
clearInterval(idInterval);
};
const detenerTemporizador = () => {
clearInterval(idInterval);
fechaFuturo = null;
diferenciaTemporal = 0;
sonido.currentTime = 0;
sonido.pause();
$tiempoRestante.textContent = "00:00.0";
init();
};
const agregarCeroSiEsNecesario = valor => {
if (valor < 10) {
return "0" + valor;
} else {
return "" + valor;
}
}
const milisegundosAMinutosYSegundos = (milisegundos) => {
const minutos = parseInt(milisegundos / 1000 / 60);
milisegundos -= minutos * 60 * 1000;
segundos = (milisegundos / 1000);
return `${agregarCeroSiEsNecesario(minutos)}:${agregarCeroSiEsNecesario(segundos.toFixed(1))}`;
};Al reanudar e iniciar se invoca a la misma función, pero el if de la línea 7 se encarga de comprobar si ya había una fecha del futuro, en ese caso el algoritmo sabe que se está reanudando, y en caso contrario es porque estamos iniciando por primera vez.
Te voy a dejar el código completo en GitHub, eres libre de explorarlo, descargarlo y modificarlo. Por otro lado te dejo una demo en este enlace.
Si te gusta JavaScript probablemente quieras leer más sobre ese lenguaje en mi blog o ver más software que he creado.
En este post te quiero compartir mi experiencia tramitando un acta de nacimiento de México…
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
Esta web usa cookies.
Ver comentarios
Muy buenas noches ,
Tengo un formulario donde relleno una tabla con un campo de fecha.
Extraigo una array con el campo fecha.
Y a la hora de pasarlo al js no logro conseguirlo.
Mi intencion es crear varios cronometros como el tuyo , pero guardando la fecha en una tabla.
Muchas gracias.
Hola. Gracias por sus comentarios. Si tiene alguna consulta, solicitud de creación de un programa o solicitud de cambio de software estoy para servirle en https://parzibyte.me/#contacto
Saludos!
Hola, está bien chido cómo lo resolviste. Personalmente tengo una duda ¿si quisiera poner un tiempo por default para no tener que meter lo datos a cada rato se agrega un "value" en el input?
de antemano gracias por tu respuesta, y muchas gracias por compartir tus conocimientos :3