Ми хочемо зробити цей проєкт з відкритим кодом доступним для людей у всьому світі.

Допоможіть перекласти цей підручник вашою мовою!

назад до уроку

Елемент таймера в режимі реального часу

У нас вже є елемент <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, коли елемент видаляється з документа. Це важливо, інакше він продовжує працювати, навіть якщо більше не потрібен. І браузер не зможе очистити пам’ять від цього елемента і посилань на нього.
  2. Ми можемо отримати доступ до поточної дати через властивість elem.date. Усі методи та властивості класу є методами та властивостями елементів.

Відкрити рішення в пісочниці.