Element živých hodin
Už máme element <formatovany-cas>, který zobrazuje hezky naformátovaný čas.
Vytvořte element <zive-hodiny>, který bude zobrazovat aktuální čas:
- Interně by měl používat
<formatovany-cas>a neměl by duplikovat jeho funkcionalitu. - Bude tikat (aktualizovat se) každou sekundu.
- Při každém tiknutí by měla být vygenerována vlastní událost jménem
tiks aktuálním datem vudálost.detail(viz kapitolu Vyvolávání vlastních událostí).
Použití:
<zive-hodiny id="elem"></zive-hodiny>
<script>
elem.addEventListener('tik', událost => console.log(událost.detail));
</script>
Ukázka:
Prosíme všimněte si:
- Když je element odstraněn z dokumentu, smažeme časovač
setInterval. To je důležité, jinak by tikal dál, i když by už nebyl zapotřebí. A prohlížeč by ho nemohl odstranit z paměti a vyčistit paměť, na kterou se odkazuje. - K aktuálnímu datu můžeme přistupovat ve vlastnosti
elem.datum. Všechny třídní metody a vlastnosti jsou samozřejmě metody a vlastnosti elementu.