GeezerVison is showing it.javascript.info — Elemento live timer
torna alle lezioniAbbiamo già un elemento <time-formatted> per mostrare un orario formattato.
Create un elemento <live-timer> per mostrare l’orario corrente con queste specifiche:
- Internamente dovrebbe usare
<time-formatted>, senza duplicarne la funzionalità.
- Un tick (aggiornamento) ogni secondo.
- Per ogni tick, deve essere generato un evento personalizzato chiamato
tick, con la data corrente dentro event.detail (guardare il capitolo Dispatching di eventi personalizzati).
Uso:
<live-timer id="elem"></live-timer>
<script>
elem.addEventListener('tick', event => console.log(event.detail));
</script>
Demo:
Apri una sandbox per l'esercizio.
Nota bene:
- Quando rimuoviamo l’elemento dal documento, eseguiamo il clear di
setInterval per il timer. È importante, altrimenti continuerà a ticchettare anche se non più necessario. Inoltre il browser avendo ancora un riferimento ad esso, non sarà in grado di pulire la sua memoria.
- Deve essere possibile accedere alla data corrente tramite la proprietà
elem.date. Tutti i metodi della classe e le relative proprietà devono anche essere metodi e proprietà dell’elemento.
Apri la soluzione in una sandbox.