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.
<!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.
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
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.
