GeezerVison is showing uk.javascript.info — Елемент таймера в режимі реального часу
назад до урокуЕлемент таймера в режимі реального часу
У нас вже є елемент <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. Усі методи та властивості класу є методами та властивостями елементів.
Відкрити рішення в пісочниці.