Onload Часы Javascript требуют исправления

Часы Javascript. ожидаемый результат: отображение даты и времени. проблема: не отображается

[Отображение часов / времени в верхнем левом углу] [1]

Этот код должен вставить время в div со значением идентификатора 'time'. Есть функция setTimeout, которая, как я подозреваю, используется неправильно. Моя проблема в том, что время не отображается. Я что-то упускаю, потому что время не показывает. Пожалуйста, помогите мне это исправить.

 <script>
        var dayArray= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        var monthArray= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

        function getTime() {
            var today = newDate();     


        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        var d = dayArray[today.getDay()];
        var mo = monthArray[today.getMonth()];
        var y = today.getFullYear();

        var mm = correctDigit(m);
        var ss = correctDigit(s);

        document.getElementById('time')
        .innerHTML = "<br><h1 class='large'>"+h+":"+mm+":"+ss+"</h1>&nbsp;<span class='dark'>"+d+",</span>&nbsp;<span class='dark'>"+mo+"</span>&nbsp;<span class='dark'>"+y+"</span>";


        var t = setTimeout (function() {
            getTime();
        }, 1000);

        function correctDigit(i){
            if (i < 10){
                i = "0" + i;
            }
            return i; 
        };
    };
    </script>
</head>
<body onload = "getTime()" class = "color-4">
    <section>
        <div class='time color-0' id = "time"></div>

onload = "t" не имеет смысла ... это должно быть имя функции, а не переменная вне области видимости. попробуйте onload = "getTime()" вместо

— 19.11.2018 21:44

я знаю спасибо. это было редактирование, которое я сделал. Эдисон :)

— 19.11.2018 21:54

похоже, вы стерли весь свой код ...

— 19.11.2018 21:55

Есть ли код для ответа на этот вопрос?

— 19.11.2018 21:57

@AnonymousSB раньше был ... проверьте историю ревизий

— 19.11.2018 23:29

@Gray, пожалуйста, верните свой исходный код, чтобы будущие посетители поняли вопрос.

— 20.11.2018 00:15

Хорошо. Я положил обратно.

— 22.11.2018 22:35

javascript clock

19.11.2018 21:40

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

111

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я исправил вашу непосредственную проблему,

изменение атрибута bodyonload для вызова функции, которую вы хотите запустить, getTime()
поставить пробел между new и Date в var today = newDate().

Календарь теперь добавляется в DOM и обновляется каждую секунду, но в логике вашего календаря все еще есть некоторые проблемы. (Подсказка: это работает, когда минуты и секунды меньше 10; поскольку это не было основной частью вашего вопроса, я оставляю его как упражнение, чтобы вы сами исправили его - так вы учитесь!)

<script>
            var dayArray= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
            var monthArray= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

            function getTime() {
                var today = new Date();     
            

            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            var d = dayArray[today.getDay()];
            var mo = monthArray[today.getMonth()];
            var y = today.getFullYear();

            m = correctDigit(m);
            s = correctDigit(s);
            
            document.getElementById('time')
            .innerHTML = "<br><h1 class='large'>"+h+":"+m+":"+s+"</h1>&nbsp;<span class='dark'>"+d+",</span>&nbsp;<span class='dark'>"+mo+"</span>&nbsp;<span class='dark'>"+y+"</span>";
           
            
            setTimeout (function() {
                getTime();
            }, 1000);

            function correctDigit(i){
                if (i < 10){
                    i = "0" + i;
                    return i; 
                }
            };
        };
        </script>
    </head>
    <body onload = "getTime()" class = "color-4">
        <section>
            <div class='time color-0' id = "time"></div>
            <div>
                <div class = "news scroll color-1">
                    <ul>
                        <li class = "ellipsis"><h4 class = "dark"><i class = "fa fa-newspaper-o"></i>&nbsp;Title 1</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
                        <li class = "ellipsis"><h4 class = "dark"><i class = "fa fa-newspaper-o"></i>&nbsp;Title 2</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
                        <li class = "ellipsis"><h4 class = "dark"><i class = "fa fa-newspaper-o"></i>&nbsp;Title 3</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
                        <li class = "ellipsis"><h4 class = "dark"><i class = "fa fa-newspaper-o"></i>&nbsp;Title 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p></li>
                    </ul>
                </div>

Спасибо, nvioli. Я был слеп к ошибке: new Date (); хахаха, я такой зеленый. Ты очень хороший. Вы оба.

— 19.11.2018 21:59

Здорово! Если я исправил вашу проблему, нажмите галочку, чтобы принять мой ответ (p.s., если у вас была открыта консоль или даже в представлении фрагмента SO, об этой ошибке было сообщено; вот как я ее нашел)

— 19.11.2018 22:01

Я только что понял, что думаю, пока вы отправляли ответ. Мне нужно больше практиковаться.

— 19.11.2018 22:03

19.11.2018 21:50

Вот рабочий рабочий пример с некоторыми заметными отличиями.

Ставлю setTimeout вне функции getTime
Я использовал setInterval вместо setTimeout
Я использовал JavaScript String.padStart(), чтобы заполнить недостающие 0

Что касается setInterval, вы можете назначить это переменной и вызвать clearInterval(variableName), если хотите остановить часы. Присвоение setTimeout переменной ничего не дает.

Если вы хотите увидеть гораздо более простую реализацию с использованием momentJS, посмотрите демонстрацию внизу

var dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

function getTime() {
  var today = new Date(),
      h = today.getHours(),
      m = today.getMinutes().toString().padStart(2, '0'),
      s = today.getSeconds().toString().padStart(2, '0'),
      d = dayArray[today.getDay()],
      mo = monthArray[today.getMonth()],
      y = today.getFullYear();
  
  document.getElementById('time').innerHTML = 
  `<br>` +
  `<h1 class='large'>${h}:${m}:${s}</h1>&nbsp;` +
  `<span class='dark'>${d},</span>&nbsp;` +
  `<span class='dark'>${mo}</span>&nbsp;` + 
  `<span class='dark'>${y}</span>`;

};

setInterval (function() {
  getTime();
}, 1000);

<div id = "time"><div>

Бонус (с использованием momentJS)

function getTime() {
  var today = moment(),
      time = today.format('HH:mm:ss'),
      date = today.format('dddd, MMMM, YYYY');
  
  document.getElementById('time').innerHTML =
  `<br>` + 
  `<h1 class='large'>${time}</h1>` +
  `<span class='dark'>${date}</span>`
};

setInterval (function() {
  getTime();
}, 1000);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id = "time"></div>

Это улучшение. Спасибо AnonymousSB.

— 22.11.2018 22:39

19.11.2018 23:56

Другие вопросы по теме

Механизм часов

Как работает функция часов в операционных системах?

Как мне преобразовать часы из одного временного интервала в другой?

Тайм-аут сокета случайным образом срабатывает быстрее, чем должен

Как реализовать включение часов в VHDL?

Как исправить фазовый сдвиг с помощью тактового делителя в VHDL?

Расчет отработанных сменных часов и обнаружение

Исправить JUnit - Autowire Clock

Гонка Verilog с делителем времени на флопах

Flask SocketIO отключается при изменении даты ОС

Onload Часы Javascript требуют исправления

Ответы 2

Бонус (с использованием momentJS)

Другие вопросы по теме

Похожие вопросы