вернуться к уроку

Элемент "живой таймер"

У нас уже есть элемент <time-formatted>, показывающий красиво отформатированное время.

Создайте элемент <live-timer>, показывающий текущее время:

  1. Внутри он должен использовать <time-formatted>, не дублировать его функциональность.
  2. Должен тикать (обновляться) каждую секунду.
  3. На каждом тике должно генерироваться пользовательское событие с именем tick, содержащее текущую дату в event.detail (смотрите главу Генерация пользовательских событий).

Использование:

<live-timer id="elem"></live-timer>

<script>
  elem.addEventListener('tick', event => console.log(event.detail));
</script>

Демо:

Открыть песочницу для задачи.

Пожалуйста, обратите внимание:

  1. Мы останавливаем таймер setInterval, когда элемент удаляется из документа. Это важно, иначе он продолжит тикать, даже если больше не нужен. И браузер не cможет очистить память от этого элемента.
  2. Мы можем получить доступ к текущей дате через свойство elem.date. Все методы и свойства класса, естественно, являются методами и свойствами элемента.

Открыть решение в песочнице.