Элемент "живой таймер"
У нас уже есть элемент <time-formatted>, показывающий красиво отформатированное время.
Создайте элемент <live-timer>, показывающий текущее время:
- Внутри он должен использовать
<time-formatted>, не дублировать его функциональность. - Должен тикать (обновляться) каждую секунду.
- На каждом тике должно генерироваться пользовательское событие с именем
tick, содержащее текущую дату вevent.detail(смотрите главу Генерация пользовательских событий).
Использование:
<live-timer id="elem"></live-timer>
<script>
elem.addEventListener('tick', event => console.log(event.detail));
</script>Демо:
Пожалуйста, обратите внимание:
- Мы останавливаем таймер
setInterval, когда элемент удаляется из документа. Это важно, иначе он продолжит тикать, даже если больше не нужен. И браузер не сможет очистить память от этого элемента. - Мы можем получить доступ к текущей дате через свойство
elem.date. Все методы и свойства класса, естественно, являются методами и свойствами элемента.