Сделал часы прокомментируйте код

105

22 декабря 2020, 22:10

function clock(){ 
  var hour = document.querySelector('.hour'); 
  var min = document.querySelector('.min'); 
  var sec = document.querySelector('.sec'); 
  var date = new Date(); 
  var hours = date.getHours(); 
  var minutes = date.getMinutes(); 
  var seconds = date.getSeconds(); 
  hour.innerHTML = hours; 
  min.innerHTML = minutes; 
  sec.innerHTML = seconds; 
  if(hours < 10){ 
     hour.innerHTML = '0' + hours; 
  } 
  if(minutes < 10){ 
    min.innerHTML = '0' + minutes; 
  } 
  if(seconds < 10){ 
    sec.innerHTML = '0' + seconds; 
  } 
}; 
clock() 
 
setInterval(clock, 1000)

<div id="clock"> 
  <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span> 
</div>

@Qwertiy написал код как я его понял

Создается функция showTime с параметрами date, selectors и root в который присваивается document
Доступ к DOM начинается с объекта document через который можно получить доступ к любым узлам
в переменную hms присваивается массив где в числовых индексах хранится значение часы, минуты, секунды
Создается цикл for где в переменной q присваивается 0 (счетчик) и почему q если по правилам хорошего тона нужно использовать i (всегда встречал i), в переменную n присваивается математический метод который дает наименьшее число
Math.min выбирает между selectors которое преобразуем в число с помощью свойства length и hms - массив в котором храним время
если q < n идем в тело цикла 7 root.querySelector(selectors[q]) в зависимости от числа в q выбирается часы, минуты, секунды (что-то одно)
textContent обладает преимуществом (или недостатком он не понимает html элементы поэтому вставляет их как текст)
Дальше идет тернарный оператор если условие выполняется перед числом добавляем 0 иначе нет
Создается функция updateTimers в теле функции создаем локальную переменную date (она видна только в этой функции) и присваиваем вcтроенный объект в js new Date (new означает что создается объект с помощью с конструктора объектов также в объекте Date есть разные методы - это указывает на статические фабричные методы
Затем вызываем функцию showTime с аргументами
updateTimers() - означает что мы ее вызываем
updateTimers() добавляем в интервал где она вызывается каждую секунды (1000 указывает на милисекунды)
Правильно я понял его код ?
Извиняюсь за косноязычие

Answer 1

Ну копипаст функции же.
Почему она так называется?
Не надо использовать innerHTML вместо textContent.
Нет смысла сохранять в переменные элементы, к которым обращаешься только 1 раз.

function showTime(date, selectors, root = document) { 
  var hms = [date.getHours(), date.getMinutes(), date.getSeconds()]; 
 
  for (var q=0, n=Math.min(selectors.length, hms.length); q<n; ++q) { 
    root.querySelector(selectors[q]).textContent = hms[q] < 10 ? "0" + hms[q] : hms[q]; 
  } 
}; 
 
function updateTimers() { 
  var date = new Date; 
  showTime(date, ['.hour', '.min', '.sec'], document.getElementById('clock-hms')); 
  showTime(date, ['.hour', '.min'], document.getElementById('clock-hm')); 
} 
 
updateTimers(); 
setInterval(updateTimers, 1000);

<div id="clock-hms"> 
  <span class="hour"></span>:<span class="min"></span>:<span class="sec"></span> 
</div> 
<div id="clock-hm"> 
  <span class="hour"></span>:<span class="min"></span> 
</div>

Answer 2

Вот так лаконично: основная идея - привязка метода к элементу через атрибуты

function update() { 
  var date = new Date 
  document.querySelectorAll('#clock span').forEach(function(span) { 
    span.textContent = String(date[span.className]()).padStart(2, '0'); 
  }); 
} 
 
update(); 
 
setInterval(update, 1000);

<div id="clock"> 
  <span class="getHours"></span>:<span class="getMinutes"></span>:<span class="getSeconds"></span> 
</div> 
 
<div id="clock"> 
  <span class="getHours"></span>:<span class="getMinutes"></span> 
</div>