В этой статье вы прочитаете как сделать часы на JavaScript для своего сайта, код будет совсем не большой и простой.
Также посмотрите статью: «Как сделать таймер на JavaScript».
HTML:
Перед тем как начать делать код, нужно не много настроить HTML.
1 | <div id="clock"></div> |
Тут просто один тег <div>
, с идентификатором clock
, он нужен для вывода времени, вот и всё.
JavaScript:
В JavaScript всё также, очень просто, всего несколько строк кода.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // Берём элемент для вывода времени let clock = document.getElementById("clock"); // Запускаем интервал setInterval(function () { // Создаём объект класса Date let date = new Date() // Получаем часы let hours = (date.getHours() < 10) ? '0' + date.getHours() : date.getHours(); // Получаем минуты let minutes = (date.getMinutes() < 10) ? '0' + date.getMinutes() : date.getMinutes(); // Получаем секунды let seconds = (date.getSeconds() < 10) ? '0' + date.getSeconds() : date.getSeconds(); // Создаём строку для вывода времени strClocke = `${hours}:${minutes}:${seconds}`; // Выводим время clock.innerHTML = strClocke; }, 1000); |
Давайте разберём этот код, сперва мы получаем элемент куда будем выводить время, потом запускаем интервал и задаём ему время 1000 миллисекунд, что равно одной обычной секунде.
Внутри интервала создаём объект класса Date()
, который нужен для работы со временем, ниже идёт объявление переменных, они будут в себе хранить текущие время: часы, минуты и секунды.
Как можете заметить, при присвоение времени, мы использую тернарную операцию, это нужно для того, что бы, если число времени будет однозначное, то для красоты ему впереди добавляли нолик.
После создания переменных для хранения времени, делаем для вывода в формате часов, и присваиваем её через параметр innerHTML
.
Теперь часы на JS для вашего сайта полностью готовы, вот результат который у вас должен получится.
Вывод:
В этой статье вы прочитали как сделать часы на чистом JavaScript для вашего сайта, и как видите код совсем не большой и лёгкий.