Отображение текущего времени в JS с заданными функциями

Question

Необходимо отображать текущее время в JS с заданными функциями.

Поиск в Интернете показал, что JS использует Date () и Time () для сбора информации, но дата и время не отображаются в HTMLпри запуске.

"use strict";
var $ = function(id) { return document.getElementById(id); };

var displayCurrentTime = function() {
    var now = new Date();  //use the 'now' variable in all calculations, etc.
    var Date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
    var hours = now.getHours()+ ":" + now.getMinutes() + ":" 
    + now.getSeconds();

    //Ok, problem now is getting HTML to call it up?
};

var padSingleDigit = function(num) {
    if (num < 10) { return "0" + num; }
    else { return num; }
};

window.onload = function() {
    // set initial clock display and then set interval timer to display
    // new time every second. Don't store timer object because it
    // won't be needed - clock will just run.

};

Инструкции для инструктора:

"Обратите внимание, что для преобразования времени компьютера с 24-часовых часов на 12-часовые, сначала проверьте, чтобы увидеть часызначение больше 12. Если это так, вычтите 12 из значения часов и установите значение AM / PM на «PM». Также имейте в виду, что значение часов для полуночи равно 0.

В стартовом проекте естьпредоставлены четыре функции: функция $, начало функции displayCurrentTime (), функция padSingleDigit (), которая добавляет начальный ноль к одной цифре, и начало обработчика события onload.

В displayCurrentTime (), добавьте код, который использует объект Date для определения текущего часа, минуты и секунды. Преобразуйте эти значения в 12-часовые часы, определите значение AM / PM ивоспроизведите эти значения в соответствующих тегах span.

Затем в обработчике события onload закодируйте таймер, который вызывает функцию displayCurrentTime () с интервалом в 1 секунду.Также убедитесь, что текущее время отображается сразу после загрузки страницы.(некоторые комментарии были включены в стартовый код, чтобы указать вам, где разместить вещи). "

Answer 1

Чтобы получить элемент HTML, вам сначала нужен один.Поэтому я сделал тег с идентификатором «часы».Затем я устанавливаю интервал, который выполняется каждые 1000 миль (1 секунда), чтобы дать мне правильно отформатированное время.

clock = document.getElementById("clock");
let hours, minutes, seconds;

function checkDigits(num, hours) {
  if (num < 10) {
    return "0" + num
  } else {
    if (hours) {
      return num - 12
    }
    return num
  }
}

function updateTime() {
  date = new Date();
  hours = checkDigits(date.getHours(), true)
  minutes = checkDigits(date.getMinutes())
  seconds = checkDigits(date.getSeconds())
  clock.innerHTML = hours + ":" + minutes + ":" + seconds;
}

window.onload = function() {
  setInterval(function() {
    updateTime()
  }, 1000);
}

<h1 id="clock"></h1>