GeezerVison is showing ja.javascript.info — Live timer element
レッスンに戻るWe already have <time-formatted> element to show a nicely formatted time.
Create <live-timer> element to show the current time:
- It should use
<time-formatted> internally, not duplicate its functionality.
- Ticks (updates) every second.
- For every tick, a custom event named
tick should be generated, with the current date in event.detail (see chapter カスタムイベントのディスパッチ).
Usage:
<live-timer id="elem"></live-timer>
<script>
elem.addEventListener('tick', event => console.log(event.detail));
</script>
Demo:
タスクのためのサンドボックスを開く
Please note:
- We clear
setInterval timer when the element is removed from the document. That’s important, otherwise it continues ticking even if not needed any more. And the browser can’t clear the memory from this element and referenced by it.
- We can access current date as
elem.date property. All class methods and properties are naturally element methods and properties.
サンドボックスで解答を開く