Question

我自学JavaScript并尝试每天编写代码。我目前正在尝试构建一个简单的时钟，但我似乎无法让我的setInterval工作。我已经尝试将它放在不同的地方，但我认为它属于'时间'功能，所以应该在此之后定位。我想知道它是否与我如何调用函数有关。我还不完全清楚何时通过哪种方法调用。指导肯定会受到赞赏。

var dayTime = function() {
  // Create a new instance of the Date contructor function. 
  var date = new Date();

  var today = function() {
    // Create an array of weekday names
    var dayArray = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    // Extract the day. Will return a numeric representation.
    var dayIndex = date.getDay();

    // Step 4: Use weekday names array with weekday numeric to display text version of weekday.
    var today = dayArray[dayIndex];
    // Step 5: Place results into span on webpage
    var x = document.getElementById("day").innerHTML = today;
  }()

  var time = function() {

    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    // Set am or pm
    var amPm = hours < 12 ? "am" : "pm";

    // Set to 12 hour time format
    hours = hours > 12 ? hours - 12 : hours;

    // Convert midnight until 1am to 12
    hours = (hours == 0) ? 12 : hours;

    var y = document.getElementById("time").innerHTML = "Current time is " + hours + ":" + minutes + ":" + seconds + " " + amPm;

  }()
  setInterval(time, 1000);
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body onload="dayTime();">
  <h1>Simple Date Exercise</h1>
  <p>Today is <span id="day"></span>
  </p>
  <p id="time">00:00</p>
</body>

</html>

Answer 1

setInterval(time, 1000);

setInterval的第一个参数需要是一个函数。您正在传递包含...

的time变量

var time = function() {
    // A bunch of statements but no return statement
}()

由于您使用()关注它，因此您立即调用它，因此返回值（undefined）已分配给time。

删除()。不要立即调用该功能。

Answer 2

您可以使用dayTime()拨打setInterval()，然后直接拨打time()。另外，我设置一个小于一秒的间隔，以确保它更准确地更新到第二个。

＆＃13;

var dayTime = function() {
      // Create a new instance of the Date contructor function. 
      var date = new Date();
    
      var today = function() {
        // Create an array of weekday names
        var dayArray = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        // Extract the day. Will return a numeric representation.
        var dayIndex = date.getDay();
    
        // Step 4: Use weekday names array with weekday numeric to display text version of weekday.
        var today = dayArray[dayIndex];
        // Step 5: Place results into span on webpage
        var x = document.getElementById("day").innerHTML = today;
      }()
    
      var time = function() {
    
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
    
        // Set am or pm
        var amPm = hours < 12 ? "am" : "pm";
    
        // Set to 12 hour time format
        hours = hours > 12 ? hours - 12 : hours;
    
        // Convert midnight until 1am to 12
        hours = (hours == 0) ? 12 : hours;
    
        var y = document.getElementById("time").innerHTML = "Current time is " + hours + ":" + minutes + ":" + seconds + " " + amPm;
    
      }();
    };
    setInterval(dayTime, 500);

＆＃13;

  <h1>Simple Date Exercise</h1>
  <p>Today is <span id="day"></span>
  </p>
  <p id="time">00:00</p>

＆＃13;

试图在我的时钟中应用setInterval失败

2 个答案: