2016-11-25 2 views
1

Я учу себя JavaScript и пытаюсь что-то кодировать каждый день. В настоящее время я пытаюсь создать простые часы, но я не могу заставить мой setInterval работать. Я пробовал позиционировать его в разных местах, но я думаю, что он относится к функции «времени», поэтому следует позиционировать после этого. Мне интересно, связано ли это с тем, как я вызываю функции. Я не совсем понимаю, когда использовать этот метод. Руководство обязательно будет оценено.Попытка применить 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>

+0

'time' не определен, так как вы сразу же вызвать функцию. – SLaks

ответ

2
setInterval(time, 1000); 

Первый аргумент setInterval потребности быть функцией. Вы пропускание time переменных, которая содержит ...

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

Поскольку вы будете следовать его (), вы вызываете его немедленно, так что возвращаемое значение (undefined) назначенная time.


Удалить (). Не вызывайте функцию немедленно.

+0

Спасибо за быстрый ответ! Я должен обработать это и практиковать, но это похоже на то, что мне нужно. – ArchieAtOrigins

0

Вы можете позвонить по номеру dayTime(), позвонив по номеру setInterval() и позвоните time(). Кроме того, я бы установил интервал ниже секунды, чтобы убедиться, что он обновляется немного более точно ко второму.

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);
<h1>Simple Date Exercise</h1> 
 
    <p>Today is <span id="day"></span> 
 
    </p> 
 
    <p id="time">00:00</p>

+0

Это работает. Я сделал это и работаю, хотя мне все еще нужно больше времени, чтобы полностью понять, почему он работает! Я также отрегулировал длину интервала. Цените помощь. – ArchieAtOrigins