Часы на JavaScript

Простой изолированный компонент часов, который может принимать объект с настройками.

See the Pen clock by FurryCat (@mohnatus-the-lessful) on CodePen.

Верстка

<div class="clock">
  <div class="clock-time">
    <span class="hours">00</span> 
    : 
    <span class="minutes">00</span> 
    : 
    <span class="seconds">00</span>
  </div>
  
  <div class="clock-buttons">
    <button type="button" 
            class="start">START</button>
    <button type="button" 
            class="stop">STOP</button>
  </div>
</div>

В компоненте .clock есть блок .clock-time, в котором непосредственно выводится время. Каждый компонент (часы, минуты и секунды) выводится в отдельном элементе span с соответствующим классом. Это нужно, чтобы мы могли легко обновлять их значения.

Второй блок внутри .clock — это блок с управляющими кнопками .clock-buttons. Здесь две кнопки: START для запуска таймера и STOP для его остановки.

Чуть позже мы установим обработчики кликов по этим кнопкам и реализуем логику вывода времени.

Стили

.clock-time {
  width: 130px;
  text-align: center;
  padding: 10px;
  border: 2px solid green;
  border-radius: 5px;
  font-size: 1.3em;
  font-weight: bold;
  display: inline-block;
}

.clock-time .hours {
  color: green;
}

.clock-time .minutes {
  color: aqua;
}

.clock-time .seconds {
  color: blue;
}

.clock-buttons button {
  display: inline-block;
  margin: 5px;
}

Скрипт

Создаем функцию-конструктор Clock, которая принимает объект настроек options. Пока в нем будет только одно поле — element, но при необходимости можно добавить другие опции.

Для справки: ООП в JavaScript.

options.element — это родительский элемент часов.

Внутри конструктора находим элементы для вывода компонентов времени и сохраняем их в отдельных свойствах. Также заводим специальное свойство для сохранения таймера.

function Clock(options) {
  let element = options.element;
  
  this.$hours = element.querySelector('.hours');
  this.$minutes = element.querySelector('.minutes');
  this.$seconds = element.querySelector('.seconds');

  this.timer = null;
}

Добавляем в прототип конструктора метод вывода времени setTime:

Clock.prototype.setTime = function() {
  let date = new Date();
  
  let hours = date.getHours();
  if (hours < 10) { 
    hours = '0' + hours; 
  };
  this.$hours.innerHTML = hours;
  
  let minutes = date.getMinutes();
  if (minutes < 10) {
    minutes = '0' + minutes;
  };
  this.$minutes.innerHTML = minutes;
  
  let seconds = date.getSeconds();
  if (seconds < 10) { 
    seconds = '0' + seconds
  };
  this.$seconds.innerHTML = seconds;
};

Метод получает текущую дату, извлекает из нее отдельные компоненты и помещает эти значения в соответствующие DOM-элементы часов.

Добавим методы start и stop для запуска и остановки часов:

Clock.prototype.start = function() {
  let setTime = this.setTime.bind(this);
  setTime();
  this.timer = setInterval(function() {
    setTime();
  }, 1000);
};

Clock.prototype.stop = function() {
  clearInterval(this.timer);
};

Метод start запускает обновление с помощью setTime() каждую секунду. Идентификатор таймера сохраняется в свойстве this.timer, чтобы при необходимости его можно было остановить. Для привязки контекста к методу setTime используем bind.

Метод stop просто сбрасывает сохраненный ранее таймер.

Осталось только добавить в конструктор обработчики кликов по кнопкам часов:

function Clock(options) {
  let element = options.element;
  
  this.$hours = element.querySelector('.hours');
  this.$minutes = element.querySelector('.minutes');
  this.$seconds = element.querySelector('.seconds');
  
  this.timer;
  
  let start = this.start.bind(this);
  let stop = this.stop.bind(this);
  
  element.querySelector('.start').addEventListener('click', start);
  element.querySelector('.stop').addEventListener('click', stop);
}

Полный код компонента:

function Clock(options) {
  let element = options.element;
  
  this.$hours = element.querySelector('.hours');
  this.$minutes = element.querySelector('.minutes');
  this.$seconds = element.querySelector('.seconds');
  
  this.timer;
  
  let start = this.start.bind(this);
  let stop = this.stop.bind(this);
  
  element.querySelector('.start').addEventListener('click', start);
  element.querySelector('.stop').addEventListener('click', stop);
}

Clock.prototype.setTime = function() {
  let date = new Date();
  
  let hours = date.getHours();
  if (hours < 10) { 
    hours = '0' + hours; 
  };
  this.$hours.innerHTML = hours;
  
  let minutes = date.getMinutes();
  if (minutes < 10) {
    minutes = '0' + minutes;
  };
  this.$minutes.innerHTML = minutes;
  
  let seconds = date.getSeconds();
  if (seconds < 10) { 
    seconds = '0' + seconds
  };
  this.$seconds.innerHTML = seconds;
};

Clock.prototype.start = function() {
  let setTime = this.setTime.bind(this);
  setTime();
  this.timer = setInterval(function() {
    setTime();
  }, 1000);
};

Clock.prototype.stop = function() {
  clearInterval(this.timer);
};

Инициализация компонента

Вызываем функцию Clock как конструктор с помощью ключевого слова new и передаем ей объект настроек. После инициализации сразу запускаем часы, вызвав метод start.

let clockOptions = { element: document.querySelector('.clock') };
let myClock = new Clock(clockOptions);
myClock.start();