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.

Explicación del funcionamiento

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.

Plantilla HTML

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.

See the gist on github.

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.

Funciones del temporizador

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:

See the gist on github.

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.

Poniendo todo junto

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.