← Все вопросы
Как вывести текущее время и обновлять его каждую секунду (часы на сайте)?
6
Хочу простые часы на странице — чтобы показывали время и каждую секунду обновлялись сами. Вывожу new Date(), но получается какая-то длинная строка и не обновляется. Как сделать по-человечески?
2 ответа
10
✓ Принятый ответ — помог автору
Нужны две вещи: брать время new Date().toLocaleTimeString() и перезапускать это каждую секунду через setInterval:
<p id="clock"></p>
const clock = document.getElementById('clock');
function showTime() {
clock.textContent = new Date().toLocaleTimeString();
}
showTime(); // показать сразу
setInterval(showTime, 1000); // и обновлять раз в секунду
toLocaleTimeString() сам форматирует в привычное 14:35:02, а не в длинную строку. Без setInterval время бы застыло в момент загрузки страницы — именно интервал заставляет часы тикать.
3
Вызов showTime() до setInterval важен: без него секунду после загрузки часы будут пустыми, пока не сработает первый интервал. Поэтому сначала показываем время сразу, а потом запускаем повтор.
Ваш ответ
Войдите, чтобы ответить на вопрос.