onload Javascript 时钟需要修复

Question

Javascript时钟。预期结果：显示日期和时间。问题：不显示

[左上角clock/time的显示][1]

此代码应将时间插入到 ID 值为 'time' 的 div 中。我怀疑有一个 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>

Answer 1

我已经通过

解决了你眼前的问题

更改 body 的 onload 属性以调用您想要的函数运行、getTime()
在 var today = newDate() 中的 new 和 Date 之间放置一个 space。

日历现在正在添加到 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>

Answer 2

这是一个工作示例，但有一些显着差异。

我把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>

onload Javascript 时钟需要修复

onload Javascript clock needs fixing

javascript

clock

奖金（使用 momentJS）