Попытка написать функцию для отображения времени в 12-часовом формате, но HTML не отображает время, и функция возвращает ноль - PullRequest
Новая
       1

Попытка написать функцию для отображения времени в 12-часовом формате, но HTML не отображает время, и функция возвращает ноль

0 голосов
/ 21 октября 2019

У меня есть задание, в котором мы должны добавить время в 12-часовом формате через функцию в js-файле. У меня есть функция написана, но HTML не поднимает ее, и функция возвращает нулевое значение.

Если я размещу функцию между тегами сценария в файле HTML, она вернет точное время, но мне нужно, чтобы она была стилизована для назначения, а также она должна быть в отдельном файле js. 

/*here is the js file*/
"use strict";
var $ = function(id) { return document.getElementById(id); };

var displayCurrentTime = function() {
     //GET CURRENT DATE-TIME
  var currentTime = new Date ();

  //GET THE CURRENT TIME
  var hours = currentTime.getHours ();
  var minutes = currentTime.getMinutes ();
  var seconds = currentTime.getSeconds ();

  //APPEND A ZERO(0) IF MINUTES OR SECONDS ARE LESS THAN 10
  minutes = ( minutes < 10 ? "0" : "" ) + minutes;
  seconds = ( seconds < 10 ? "0" : "" ) + seconds;

  //CHOOSE AM IF HOUR IS LESS THAN 12 AND PM IF HOUR IS BIGGER THAN 12
  var ampm = ( hours < 12 ) ? "AM" : "PM";

  //CHANGE TO 12 HOUR FORMAT BY SUBTRACTING 12 IF HOUR IS BIGGER THAN 12.
  hours = ( hours > 12 ) ? hours - 12 : hours;

  //CHANGE HOUR OF 0 (MIDNIGHT) TO 12.
  hours = ( hours == 0 ) ? 12 : hours;

  //CREATE STRING OF TIME
  var currentTimeString = hours + ":" + minutes + ":" + seconds + " " + ampm;

  //DISPLAY TIME IN DIV
  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}
var displayCurrentTime = $("minutes");
console.log(displayCurrentTime);

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.
    displayCurrentTime(setInterval(1000));
};

В файле HTML есть 4 идентификатора диапазона (часы, минуты, секунды и ампер), которые необходимо заполнить.

Вот файл index.html: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">  
    <title>Clock</title>
    <link rel="stylesheet" href="clock.css">
    <script src="clock.js"></script>
</head>
<body>
    <main>
        <h1>Digital clock</h1>
        <fieldset>
            <legend>Clock</legend>
            <span id="hours">&nbsp;</span>:
            <span id="minutes">&nbsp;</span>:
            <span id="seconds">&nbsp;</span>&nbsp;
            <span id="ampm">&nbsp;</span>
        </fieldset>
    </main>
</body>
</html>

1 Ответ

0 голосов
/ 21 октября 2019

Я вижу несколько проблем, которые могут вызвать у вас

1) Вы определили свою функцию как displayCurrentTime (которая работает), но затем полностью перезаписали ее строкой var displayCurrentTime = $("minutes"). Таким образом, вместо вызова функции вы получите элемент - Ваш console.log () сразу после, поэтому вы видите нулевое значение

2) Вы говорите: «4 идентификатора диапазона в HTML-файле (часы, минуты, секунды и амперметр), которые необходимо заполнить», но ваш сценарий просто возвращает все эти поля, объединенные вместе - это вам не полезно, но у вас естьвсе правильные значения уже есть в функции 

var displayCurrentTime = function() {
  var currentTime = new Date ();

  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();
  var seconds = currentTime.getSeconds();

  minutes = ( minutes < 10 ? "0" : "" ) + minutes;
  seconds = ( seconds < 10 ? "0" : "" ) + seconds;

  var ampm = ( hours < 12 ) ? "AM" : "PM";

  hours = ( hours > 12 ) ? hours - 12 : hours;
  hours = ( hours == 0 ) ? 12 : hours;

  // At this point, all 4 values are ready to drop into your span tags
  $('hours').textContent = hours;
  $('minutes').textContent = minutes;
  $('seconds').textContent = seconds;
  $('ampm').textContent = ampm;
}

3) Ваш setInterval вызывается неправильно, он должен выглядеть следующим образом: 

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

Вот кодовая ручка с этими изменениями

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...