onavload Javascript часы нуждаются в исправлении - PullRequest
Новая
       6

onavload Javascript часы нуждаются в исправлении

0 голосов
/ 19 ноября 2018

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

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

Этот код должен вставлять время в элемент div со значением ID '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>

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

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

  • Я поставил 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>
0 голосов
/ 19 ноября 2018

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

  • , изменив атрибут body onload для вызова функции, которую вы хотите запустить, 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>
...