Cronometro JavaScript

Harshit Jindal 12 ottobre 2023

JavaScript

Cronometro JavaScript

Un cronometro viene utilizzato per misurare la quantità di tempo tra la sua attivazione e disattivazione. Aiuta a misurare il tempo impiegato per un’attività specifica. Costruiremo il nostro cronometro utilizzando i metodi di temporizzazione JavaScript setTimeout() e clearTimeout() che aiutano nelle implementazioni relative all’intervallo di tempo. Il cronometro ha un display e tre pulsanti. Il display mostra l’ora ei tre pulsanti per avviare, fermare e azzerare il cronometro. Questo tutorial insegna come costruire un cronometro in JavaScript.

Cronometro JavaScript

Codice HTML

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

Nel codice sopra, utilizziamo HTML per visualizzare l’ora del cronometro e creare i tre pulsanti richiesti start, stop e reset.

Codice 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;
}

cronometro javascript

Per prima cosa selezioniamo tutti gli elementi HTML utilizzando i selettori in modo da poterli manipolare utilizzando JavaScript e inizializzare le variabili 3 hrs, min e sec per memorizzare l’ora corrente. Dichiariamo anche una variabile t per memorizzare setTimeout() e la cancelliamo chiamando clearTimeout().
Abbiamo collegato la funzione timer al pulsante start. Ogni volta che si fa clic sul pulsante start, viene chiamata la funzione timer(), che a sua volta chiama la funzione di aggiunta a un intervallo di 1 secondo. La funzione add() chiama la funzione tick() per incrementare i secondi di 1 e regolare i minuti e le ore di conseguenza. Azzera il contenuto del display per visualizzare la nuova ora e poi si richiama richiamando nuovamente la funzione timer().
Abbiamo collegato clearTimeout() al pulsante stop per interrompere la chiamata periodica della funzione di aggiunta.
Abbiamo allegato una funzione che reimposta l’ora come 00:00:00 e reimposta il pulsante sec, min, e hrs su 0 su reset.

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