Cronómetro JavaScript

Harshit Jindal 12 octubre 2023 JavaScript

Cronómetro JavaScript

Se utiliza un cronómetro para medir la cantidad de tiempo entre su activación y desactivación. Ayuda a medir el tiempo necesario para una actividad específica. Construiremos nuestro cronómetro usando los métodos de tiempo de JavaScript setTimeout() y clearTimeout() que ayudan en las implementaciones relacionadas con el intervalo de tiempo. El cronómetro tiene una pantalla y tres botones. La pantalla muestra la hora y los tres botones para iniciar, detener y reiniciar el cronómetro. Este tutorial enseña cómo construir un cronómetro en JavaScript.

Cronómetro JavaScript

código HTML

<h1><time>00:00:00</time></h1>
<button id="strt">start</button>
<button id="stp">stop</button>
<button id="rst">reset</button>

En el código anterior, utilizamos HTML para mostrar la hora del cronómetro y crear los tres botones necesarios start, stop y reset.

Código JavaScript

var h1 = document.getElementsByTagName('h1')[0];
var start = document.getElementById('strt');
var stop = document.getElementById('stp');
var reset = document.getElementById('rst');
var sec = 0;
var min = 0;
var hrs = 0;
var t;

function tick() {
  sec++;
  if (sec >= 60) {
    sec = 0;
    min++;
    if (min >= 60) {
      min = 0;
      hrs++;
    }
  }
}
function add() {
  tick();
  h1.textContent = (hrs > 9 ? hrs : '0' + hrs) + ':' +
      (min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec);
  timer();
}
function timer() {
  t = setTimeout(add, 1000);
}

timer();
start.onclick = timer;
stop.onclick = function() {
  clearTimeout(t);
} reset.onclick = function() {
  h1.textContent = '00:00:00';
  seconds = 0;
  minutes = 0;
  hours = 0;
}

cronómetro javascript

Primero seleccionamos todos los elementos HTML usando selectores para poder manipularlos usando JavaScript e inicializar 3 variables hrs, min y sec para almacenar la hora actual. También declaramos una variable t para almacenar setTimeout() y la borramos llamando a clearTimeout().
Hemos adjuntado la función de temporizador al botón start. Siempre que hacemos clic en el botón start, se llama a la función timer(), que a su vez llama a la función añadir en un intervalo de 1 segundo. La función add() llama a la función tick() para incrementar los segundos en 1 y ajustar los minutos y las horas en consecuencia. Restablece el contenido de la pantalla para mostrar la nueva hora y luego se recupera llamando nuevamente a la función timer().
Hemos adjuntado el clearTimeout() al botón stop para dejar de llamar a la función de adición periódicamente.
Hemos adjuntado una función que restablece la hora como 00:00:00 y restablece el botón sec, min y hrs a 0 para reset el botón.

¿Disfrutas de nuestros tutoriales? Suscríbete a DelftStack en YouTube para apoyarnos en la creación de más guías en vídeo de alta calidad. Suscríbete

Autor: Harshit Jindal

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn