Cronómetro con JavaScript – Open source

Cronómetro con JavaScript con marcas - Código open source

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.

Cronómetro con JavaScript con marcas – Código open source

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.

<!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>Cronómetro 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">
 <style>
  .mdi {
   font-size: 3rem;
  }

  #tiempoTranscurrido {
   font-size: 4rem;
  }
 </style>
</head>


<body>
 <section class="section">
  <div class="columns">
   <div class="column has-text-centered">
    <h2 id="tiempoTranscurrido"></h2>
    <button class="button is-success is-large" id="btnIniciar"><span class="mdi mdi-play"></span></button>
    <button class="button is-success is-large" id="btnPausar"><span class="mdi mdi-pause"></span></button>
    <button class="button is-primary is-large" id="btnMarca"><span class="mdi mdi-flag"></span></button>
    <button class="button is-warning is-large" id="btnDetener"><span class="mdi mdi-stop"></span></button>
    <div id="contenedorMarcas">
    </div>
   </div>
  </div>
 </section>
 <script src="script.js"></script>
</body>

</html>

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.

Cronómetro con JavaScript – Contando tiempo transcurrido y ocultando botones

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í:

document.addEventListener("DOMContentLoaded", () => {
 const $tiempoTranscurrido = document.querySelector("#tiempoTranscurrido"),
  $btnIniciar = document.querySelector("#btnIniciar"),
  $btnPausar = document.querySelector("#btnPausar"),
  $btnMarca = document.querySelector("#btnMarca"),
  $btnDetener = document.querySelector("#btnDetener"),
  $contenedorMarcas = document.querySelector("#contenedorMarcas");
 let marcas = [],
  idInterval,
  tiempoInicio = null;
 let diferenciaTemporal = 0;

 const ocultarElemento = elemento => {
  elemento.style.display = "none";
 }

 const mostrarElemento = elemento => {
  elemento.style.display = "";
 }

 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))}`;
 };


 const iniciar = () => {
  const ahora = new Date();
  tiempoInicio = new Date(ahora.getTime() - diferenciaTemporal);
  clearInterval(idInterval);
  idInterval = setInterval(refrescarTiempo, 100);
  ocultarElemento($btnIniciar);
  ocultarElemento($btnDetener);
  mostrarElemento($btnMarca);
  mostrarElemento($btnPausar);
 };
 const pausar = () => {
  diferenciaTemporal = new Date() - tiempoInicio.getTime();
  clearInterval(idInterval);
  mostrarElemento($btnIniciar);
  ocultarElemento($btnMarca);
  ocultarElemento($btnPausar);
  mostrarElemento($btnDetener);
 };
 const refrescarTiempo = () => {
  const ahora = new Date();
  const diferencia = ahora.getTime() - tiempoInicio.getTime();
  $tiempoTranscurrido.textContent = milisegundosAMinutosYSegundos(diferencia);
 };
 const ponerMarca = () => {
  marcas.unshift(new Date() - tiempoInicio.getTime());
  dibujarMarcas();
 };
 const dibujarMarcas = () => {
  $contenedorMarcas.innerHTML = "";
  for (const [indice, marca] of marcas.entries()) {
   const $li = document.createElement("p");
   $li.innerHTML = `<strong class="is-size-4">${marcas.length - indice}.</strong> ${milisegundosAMinutosYSegundos(marca)}`;
   $li.classList.add("is-size-3");
   $contenedorMarcas.append($li);
  }
 };

 const detener = () => {
  if (!confirm("¿Detener?")) {
   return;
  }
  clearInterval(idInterval);
  init();
  marcas = [];
  dibujarMarcas();
  diferenciaTemporal = 0;
 }

 const init = () => {
  $tiempoTranscurrido.textContent = "00:00.0";
  ocultarElemento($btnPausar);
  ocultarElemento($btnMarca);
  ocultarElemento($btnDetener);
 };
 init();

 $btnIniciar.onclick = iniciar;
 $btnMarca.onclick = ponerMarca;
 $btnPausar.onclick = pausar;
 $btnDetener.onclick = detener;
});

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

Cronómetro en funcionamiento

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/