1

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 написал код как я его понял

  1. Создается функция showTime с параметрами date, selectors и root в который присваивается document
  2. Доступ к DOM начинается с объекта document через который можно получить доступ к любым узлам
  3. в переменную hms присваивается массив где в числовых индексах хранится значение часы, минуты, секунды
  4. Создается цикл for где в переменной q присваивается 0 (счетчик) и почему q если по правилам хорошего тона нужно использовать i (всегда встречал i), в переменную n присваивается математический метод который дает наименьшее число
  5. Math.min выбирает между selectors которое преобразуем в число с помощью свойства length и hms - массив в котором храним время
  6. если q < n идем в тело цикла 7 root.querySelector(selectors[q]) в зависимости от числа в q выбирается часы, минуты, секунды (что-то одно)
  7. textContent обладает преимуществом (или недостатком он не понимает html элементы поэтому вставляет их как текст)
  8. Дальше идет тернарный оператор если условие выполняется перед числом добавляем 0 иначе нет
  9. Создается функция updateTimers в теле функции создаем локальную переменную date (она видна только в этой функции) и присваиваем вcтроенный объект в js new Date (new означает что создается объект с помощью с конструктора объектов также в объекте Date есть разные методы - это указывает на статические фабричные методы
  10. Затем вызываем функцию showTime с аргументами
  11. updateTimers() - означает что мы ее вызываем
  12. updateTimers() добавляем в интервал где она вызывается каждую секунды (1000 указывает на милисекунды)
  13. Правильно я понял его код ?
  14. Извиняюсь за косноязычие
18
  • к однозначным числам не хватает ведущего нуля слева. получается некрасивое время 9:25:1
    – Lexx918
    16 мая 2019 в 15:18
  • при запуске видна запись hh:mm:ss
    – Grundy
    16 мая 2019 в 15:19
  • @Grundy моргните когда нажимаете клавишу выполнить код :))
    – Leks
    16 мая 2019 в 15:20
  • @Grundy а так спасибо, не знаю как исправить :(
    – Leks
    16 мая 2019 в 15:20
  • @Lexx918 спасибо
    – Leks
    16 мая 2019 в 15:24

2 ответа 2

3
  1. Ну копипаст функции же.
  2. Почему она так называется?
  3. Не надо использовать innerHTML вместо textContent.
  4. Нет смысла сохранять в переменные элементы, к которым обращаешься только 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>

16
  • щас у человека мозг взорвется:D
    – ThisMan
    16 мая 2019 в 17:02
  • @ThisMan, вроде нормально же?
    – Qwertiy
    16 мая 2019 в 17:03
  • просто, судя по комментариям тс, у него знания минимальные, а тут и параметры по умолчанию и циклы и все прочее
    – ThisMan
    16 мая 2019 в 17:04
  • @ThisMan, хм.. а параметр по умолчанию я сделал, но не использовал...
    – Qwertiy
    16 мая 2019 в 17:04
  • @Qwertiy здравствуйте я посмотрел ваш код и написал как я его понял посмотрите пожалуйста
    – Leks
    16 мая 2019 в 17:52
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>

9
  • я не знаю ES6 :(((
    – Leks
    16 мая 2019 в 17:51
  • @Leks убрал стрелочные функции 16 мая 2019 в 17:53
  • спасибо придется и Ваш код описывать :)
    – Leks
    16 мая 2019 в 17:55
  • @Leks а зачем? просто примите к сведению 16 мая 2019 в 17:55
  • new Date() может измениться между вызовами и получится фигня.
    – Qwertiy
    16 мая 2019 в 17:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.