Создаем цифровые часы на JavaScript

Создание цифровых часов – это простой и увлекательный способ освоить основы JavaScript. В статье пошагово объясняется, как с нуля разработать функциональный интерфейс, отображающий текущее время.

Вы узнаете, как работает обновление данных в реальном времени и как стилизовать часы с помощью CSS. Это отличная практика для тех, кто хочет укрепить свои знания и увидеть результат прямо в браузере.

Обновлено: 2025-08-01 01:22:48 Наталья Кайдаавтор материала

Цифровые часы в 24- часовом формате

Структура

Создадим элемент div  с атрибутом id =“clock”, в котором будет отображаться время с помощью JavaScript.

HTML

<div id="clock"></div>

Стили

Для текста можно установить размер шрифта и цвет. В качестве шрифта выберем Orbitron. Время будет отображаться на черном фоне.

CSS

/* Google font */
@import url('https://fonts.googleapis.com/css?family=Orbitron');

body {
  background-color: #121212;
}

#clock {
  font-family: 'Orbitron', sans-serif;
  color: #66ff99;
  font-size: 56px;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

Скрипт

Весь код часов основан на функции currentTime(). Внутри функции создается объект класса Date, который  используется для получения текущего часа, минут и секунд. Их значения сохраняются в разных переменных.

JavaScript

function currentTime() {
  var date = new Date(); /* создание экземпляра объекта класса Date ()*/
  var hour = date.getHours();
  var min = date.getMinutes();
  var sec = date.getSeconds();
}

Чтобы элементы времени всегда отображались в двузначном формате, перед ними ставится 0 всякий раз, когда они меньше 10. Для этого используется метод updateTime()  .

JavaScript

function currentTime() {
  hour = updateTime(hour);
  min = updateTime(min);
  sec = updateTime(sec);
}

function updateTime(k) {
  if (k < 10) {
    return "0" + k;
  }
  else {
    return k;
  }
}

Теперь отобразим текущее время в элементе div. Для этого используется метод document.getElementById  и свойство innerHTML.

JavaScript

document.getElementById("clock").innerHTML = hour + " : " + min + " : " + sec; /* adding time to the div */

Чтобы запустить таймер, применим метод setTimeout(). В качестве аргументов он принимает функцию currentTime()  в качестве первого аргумента и временя (в миллисекундах). В нашем случае функция вызывается каждые 1000 миллисекунд.

Наконец, функция currentTime() вызывается для запуска всего процесса.

JavaScript

function currentTime() {
  var t = setTimeout(function(){ currentTime() }, 1000); /* настаиваем таймер */
}

currentTime(); /* Вызываем функция currentTime(), которая запускает весь процесс*/

Мы только что создали цифровые часы.

Цифровые часы в 12-часовом формате

Для часов с 12-часовым форматом времени HTML и CSS остаются такими же, как и в предыдущем случае.

Структура

Создаем блок div  для отображения времени.

HTML

<div id="clock"></div>

Стиль

Стиль часов тоже не меняется.

CSS

/* Google font */
@import url('https://fonts.googleapis.com/css?family=Orbitron');

body {
  background-color: #121212;
}

#clock {
  font-family: 'Orbitron', sans-serif;
  color: #66ff99;
  font-size: 56px;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

Скрипт

JavaScript-код для цифровых часов показан ниже.

JavaScript

function currentTime() {
  var date = new Date(); /* создаем объект класса Date() */
  var hour = date.getHours();
  var min = date.getMinutes();
  var sec = date.getSeconds();
  hour = updateTime(hour);
  min = updateTime(min);
  sec = updateTime(sec);
  document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */
  var t = setTimeout(function(){ currentTime() }, 1000); /* настраиваем таймер */
}

function updateTime(k) {
  if (k < 10) {
    return "0" + k;
  }
  else {
    return k;
  }
}

currentTime(); /* вызываем функцию currentTime() */

Нам необходимо добавить еще три строки кода и наши часы будут готовы. Создаем переменную и присваиваем ей начальное значение «AM». Эта переменная будет использоваться для хранения значения «AM» или «PM». Для присвоения переменной midday значения «PM» используется тернарный оператор.

JavaScript

function currentTime() {
  var midday = "AM";
  midday = (hour >= 12) ? "PM" : "AM";
}

Чтобы отображать время в 12-часовом формате, количество часов не должно превышать двенадцать. Поэтому если оно больше, то 12 вычитается из количества часов. Кроме этого, количество часов меняется на 12.

JavaScript

function currentTime() {
  hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour);
}

Наталья Кайдаавтор-переводчик статьи «How to Create a Digital Clock using JavaScript»