En este post te expondré un pequeño proyecto que recién he terminado. Se trata de un cronómetro programado con JavaScript puro que funciona en cualquier dispositivo con un navegador web.

Funciona como un cronómetro normal: permite iniciar, pausar y detener el cronómetro así como poner marcas o banderas.

A lo largo del post te explicaré su funcionamiento y cómo es que lo he programado. Te repito que no utilicé ningún framework de JS.

Estructura del HTML

Comencemos viendo la estructura de la página. Vamos a tener 4 botones y un contenedor en donde vamos a mostrar las marcas que el usuario ha hecho.

En cuanto a los botones, vamos a ocultar y mostrar algunos elementos HTML dependiendo de la situación. Por ejemplo, cuando el cronómetro se inicie vamos a ocultar el botón de detener y el botón de iniciar.

Por ahora fíjate en el id de los elementos, pues más adelante los vamos a recuperar con JavaScript usando querySelector.

Función del cronómetro

Antes de seguir te voy a explicar cómo funciona el conteo del tiempo. No voy a aumentar una variable cada 1 segundo, ya que eso puede llevar a resultados inexactos.

Lo que haré para este cronómetro en JavaScript es tomar la fecha de inicio de cuando se presiona el botón y, en cada momento antes de dibujar el tiempo transcurrido, calcular el tiempo transcurrido en ese instante. Es decir, colocar la diferencia (con precisión de milisegundos) entre el tiempo actual y el tiempo de inicio.

También usaré setInterval para refrescar el tiempo transcurrido cada 100 milisegundos de modo que el cronómetro se vea fluido, pero esto no afectará al conteo del tiempo transcurrido.

Finalmente para el caso de que el cronómetro se pause voy a guardar la diferencia del tiempo (es decir, el tiempo que ya iba transcurrido) para restarlo al tiempo de inicio al momento de reanudar.

Vamos a usar simplemente al objeto Date de JS junto con sus métodos como getTime para obtener los milisegundos

Lo demás son operaciones matemáticas, y para mostrar el tiempo transcurrido de manera legible he usado una función que ya mostré anteriormente para formatear los milisegundos como minutos y segundos.

Código del cronómetro

Pasemos al código que ya te he explicado anteriormente. Queda así:

Por cierto no lo había mencionado antes, pero estoy usando los iconos de Material Design Icons, y el framework CSS bulma. Puedes removerlos o cambiarlos, ya que la app no necesita de ellos y solo los he puesto por estética.

Poniendo todo junto

El código completo lo dejaré en GitHub. También te dejo una demo por aquí. Si este proyecto de cronómetro te ha gustado puede que quieras ver más proyectos que he realizado o leer más sobre JavaScript en mi blog.