Codice completo
Il timer usa setInterval() e conserva l'identificativo per poterlo fermare.
<p>Secondi: <strong id="secondi">0</strong></p>
<button id="avvia">Avvia</button>
<button id="pausa">Pausa</button>
<button id="reset">Reset</button>
<script>
const secondi = document.querySelector('#secondi');
const avvia = document.querySelector('#avvia');
const pausa = document.querySelector('#pausa');
const reset = document.querySelector('#reset');
let valore = 0;
let timerId = null;
avvia.addEventListener('click', function() {
if (timerId !== null) return;
timerId = setInterval(function() {
valore++;
secondi.textContent = valore;
}, 1000);
});
pausa.addEventListener('click', function() {
clearInterval(timerId);
timerId = null;
});
reset.addEventListener('click', function() {
clearInterval(timerId);
timerId = null;
valore = 0;
secondi.textContent = valore;
});
</script>
Commento
- Il controllo su timerId evita di avviare più timer insieme.
- clearInterval() ferma il ciclo automatico.
- Il reset azzera sia il timer sia il numero mostrato.
Prova a modificarlo
Cambia nomi, testi e valori iniziali. Poi aggiungi una piccola regola CSS per rendere evidente lo stato dell'interfaccia.