Блог

Главная - Вопросы по программированию - Пользовательский код для отображения текущего времени не работает

Пользовательский код для отображения текущего времени не работает

#javascript #html #datetime

#javascript #HTML #дата и время

Вопрос:

 //<![CDATA[
var displayCurrentTime = new function() {
  // Get values...
  var sysHour = getHours(); // Get Hours
  var curHour = 0; // Initialize current hour (12 hr format)
  var morningEvening = "AM"; // Initialize AM/PM notation

  if (sysHour < 13) { // If it's in the morning, set time as is.
    curHour = sysHour;
    morningEvening = "AM"
  } else {
    curHour = sysHour - 12; // If it's in the evening, subtract 12 from the value and use "PM"
    morningEvening = "PM"
  }
  var curMins: getMinutes; // Get current minutes...

  // Capture the ID of the notification bar div, and compose a string from the above values.
  var notificationBar = document.getElementById("notificationBar");
  var dateTimeString = curHour   ":"   curMins   " "   morningEvening;


  // All that code above files into this fun stuff.
  notificationBar.innerHTML = dateTimeString;
}

window.setInterval(function() {
  displayCurrentTime();
}, 1000);
//]]>

Я читал некоторую информацию, и я хотел создать простой скрипт, который захватывает час и минуту, выполняет некоторые вычисления, чтобы определить, является ли это AM или PM, создает строковую переменную из этих результатов, а затем помещает ее внутрь определенного элемента DIV. Это происходит каждую секунду.

Большая часть кода, который я написал, кажется, имеет смысл, основываясь на том, что я прочитал. Вначале я пытался использовать функцию displayCurrentTime () {}, а также то, что вы видите ниже (var displayCurrentTime = new function() {}), и, похоже, ни то, ни другое не работает. Я не могу заставить свой текст отображаться на странице. Примечание: идентификатор div — это NotificationBar, как и здесь.

Есть ли в этом коде что-нибудь, что не имеет смысла, или это действительно требует публикации полного HTML?

Комментарии:

1. new function ? Удалите new . Также: var curMins: getMinutes; недопустимый синтаксис. Используйте = . Проверьте консоль. Должно появиться сообщение об ошибке.

2. в вашем коде немного синтаксических ошибок. Кроме того, getHours() и getMinutes() являются методами, которые являются частью Date объекта.

3. var curMins = getMinutes(); Используйте знак равенства и, getMinutes — это функция, которую вы забыли добавить () в конце.

Ответ №1:

Вам не нужно new перед функцией, которую вы определяете заново, вы не создаете экземпляр класса.
У вас несколько синтаксических ошибок, например, var curMins : ... вместо var curMins = ... .

Кроме того, вы не можете использовать методы getHours() и getMinutes() вне Date объекта: 

 var displayCurrentTime = function() {
                // Get values...
                var d = new Date();
                var sysHour = d.getHours();    // Get Hours
                var curHour = 0;             // Initialize current hour (12 hr format)
                var morningEvening = "AM";   // Initialize AM/PM notation
                    
                if (sysHour < 13) {          // If it's in the morning, set time as is.
                    curHour = sysHour;
                    morningEvening = "AM"
                } else {
                    curHour = sysHour - 12;  // If it's in the evening, subtract 12 from the value and use "PM"
                    morningEvening = "PM"
                }
                var curMins = d.getMinutes();     // Get current minutes...
                    
                var curSecs = d.getSeconds(); //optionally get seconds too 
                // Capture the ID of the notification bar div, and compose a string from the above values.
                var notificationBar = document.getElementById("notificationBar");
                var dateTimeString = curHour   ":"   curMins   ":"   curSecs   " "   morningEvening;
                    
                    
                // All that code above files into this fun stuff.
        notificationBar.innerHTML = dateTimeString;
            }
                
            window.setInterval(function(){ displayCurrentTime(); }, 1000);  
 <div id='notificationBar'>
Time Here 
</div>

Смотрите об объекте Date:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

О функциях и выражении анонимной функции:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#The_function_expression_(function_expression)

Также:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Howto

Комментарии:

1. Моя единственная проблема здесь сейчас заключается в том, что, похоже, он не обновляется автоматически. Я вижу, что значения меньше 10 отображают только одну цифру (я исправлю это достаточно легко), но, тем не менее, как мне заставить его фактически обновиться? Кажется, код внизу для автоматического запуска не работает? Выполняю ли я самозапускающуюся функцию (или какой-то другой правильный термин, я просто забыл)

2. @Anthony, он запущен автоматически, вы установили интервал, но имейте в виду, что изменения видны только после изменения каждой минуты, независимо от интервала. Попробуйте добавить секунды с помощью d.getSeconds() , и вы увидите, что это изменится

3. @Anthony, я добавил секунды в свой отредактированный пример, чтобы вы могли видеть обновления

4. Таким образом, он не обновлялся. Это работает только тогда, когда я перезагружаю страницу вручную… window.setInterval(displayCurrentTime(), 1000); это код, который у меня есть после внесения изменений из других предложений… любые другие необходимые изменения

5. @Anthony, ты запускал фрагмент кода? Это должно сработать. Странно

Ответ №2:

В вашей функции есть несколько синтаксических ошибок, я разберусь с ними одна за другой:

  1. Вы не должны использовать new при объявлении функции. Просто отбросьте его =) var displayCurrentTime = function() {
  2. Вы пытаетесь присвоить значение переменной, используя синтаксис json : в var minutes: getMinutes . Вы также забыли выполнить функцию, поэтому попробуйте var minutes = getMinutes();
  3. В (2) Я предполагаю, что вы уже объявили методы getHours и getMinutes , но если нет, вы можете вызвать их непосредственно из нового Date объекта:
 var date = new Date();
var sysHours = date.getHours();
var minutes = date.getMinutes();
//...

Это должно сработать!

Дополнительно: вы можете пропустить добавление displayCurrentTime к другой функции внутри setInterval функции: window.setInterval(displayCurrentTime, 1000); 

 var displayCurrentTime = function() {
            var date = new Date();           // Get current date object
            var sysHour = date.getHours();   // Get Hours
            var curHour = 0;                 // Initialize current hour (12 hr format)
            var morningEvening;              // No need to initialize
            if (sysHour < 13) {              // If it's in the morning, set time as is.
                curHour = sysHour;
                morningEvening = "AM"
            } else {
                curHour = sysHour - 12;      // If it's in the evening, subtract 12 from the value and use "PM"
                morningEvening = "PM"
            }
            var curMins = date.getMinutes(); // Get Minutes
                
            // Capture the ID of the notification bar div, and compose a string from the above values.
            var notificationBar = document.getElementById("notificationBar");
            var dateTimeString = curHour   ":"   curMins   " "   morningEvening;

            // All that code above files into this fun stuff.
            notificationBar.innerHTML = dateTimeString;
        }
            
        window.setInterval(displayCurrentTime, 1000);  
 <div id='notificationBar'></div>