Найти тему
СОЗДАЮ

Делаем простые часы на javascript + html

Добрый день. В этой статье рассмотрим как просто сделать часы на javascript + HTML для своего сайта.

Итак, приступим.

В любом месте, где хотите чтобы отображались часы вставляем такой блок:

<p id="date" style="font-size:20px;"></p>

Тут мы просто вставили пустой параграф, присвоили ему id с именем date, как раз по этому id и будут вставляться наши часики.

И чуть ниже на странице вставляем тело нашего скрипта:

<script>
setInterval(() => document.querySelector('#date').innerHTML = new Date().getHours() +':'+ new Date().getMinutes() +':'+ new Date().getSeconds(), 1000);
</script>

Функция setInterval - обновляет наши часы каждую секунду. Метод document.querySelector делает выборку по нашему id и innerHTML вставляет код в наш параграф.

Date().getHours() - из сегодняшней даты берет только время в часах.

new Date().getMinutes() - из сегодняшней даты берет минуты

new Date().getSeconds() - из сегодняшней даты берет секунды.

Так же существуют такие методы:

getDate() - берет дни из даты в формате от 0 до 31.

getMonth() - выборка месяца в формате 0-11.

getFullYear() - получаем год в формате 4 цифр.

Часы готовы. Ничего сложного.