← Все вопросы

Как вывести текущее время и обновлять его каждую секунду (часы на сайте)?

Задан 7 месяцев назад227 просмотров2 ответа
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 важен: без него секунду после загрузки часы будут пустыми, пока не сработает первый интервал. Поэтому сначала показываем время сразу, а потом запускаем повтор.

Ваш ответ

Войдите, чтобы ответить на вопрос.