Question

这段代码出了什么问题，我一直在试图找出它为什么不起作用，但我找不到错误。

var sec = 0;
var min = 0;
var hour = 0;
var p = document.getElementById("p");
function clock() {
    sec++;
    p.innerHTML = hour + ":" + min + ":" + sec; 
    if (sec == 60) {
        sec = 0;
        min++;
    }
    if (min == 60) {
        min = 0;
        hour++; 
    }
};
window.setInterval(clock,1000);

Answer 1

该代码只会在元素中显示99，并且只有在代码位于下面的中且id值为p的元素时才会显示HTML中的<div id="p"></div>。（例如getElementById或类似内容;请注意id按其getElementById值获取元素，不其标记名称。）这是因为{{1}如果尚未解析元素的HTML，则该元素将不存在，因此getElementById将返回null。

要显示其他内容，请更改

p.innerHTML = 99; // ...

...实际显示来自sec，min和hour的值的内容。

另请注意，您提供的时间间隔setInterval仅为近似值，因此此时钟会漂移。

以下是一个完整的示例，请注意script标记与div id="p"标记的关系，以及我对上面提到的JavaScript行所做的更改：Live Copy

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Partially-Fixed Clock</title> </head> <body> <div id="p"></div>  <script> var sec = 0; var min = 0; var hour = 0; var p = document.getElementById("p"); function clock() { sec++; p.innerHTML = hour + ":" + min + ":" + sec; if (sec == 60) { sec = 0; min++; } if (min == 60) { min = 0; hour++; } }; window.setInterval(clock,1000); </script> </body> </html>

这不能解决漂移问题;我把它作为读者的练习。如果你想要一个“计数”计时器，最好的选择是获取代码启动时的日期/时间：

var start = new Date();

...然后每次运行clock时，获取自那时以来经过的总毫秒数：

var elapsed = new Date() - start;

...并进行数学计算（每秒1000毫秒等）以确定它已经存在多长时间。

Answer 2

我假设您的脚本已在文档的<head>内找到或加载。

浏览器从上到下解析页面。这会导致脚本在加载文档的其余部分之前运行，并且您的<p> - 元素尚不存在。您的脚本必须等到文档完全加载，以便实际可以使用<p> - 元素。要实现此目的，只需使用onLoad对象的window事件。

// This binds a function to a specific event.
// In our case, that's the onLoad event of the window object.
// The function gets called as soon as the entire document is done loading.
window.addEventListener("load", function() {
    var sec = 0;
    var min = 0;
    var hour = 0;
    // This line failed because an element with the ID "p" did not exist yet.
    // That's why you should wrap it in the onLoad event.
    var p = document.getElementById("p");
    function clock(){
        sec++;
        p.innerHTML = hour + ":" + min + ":" + sec; 
        if(sec == 60){
            sec = 0;
            min++;
        }
        if(min == 60){
            min = 0;
            hour++; 
        }
    };
    window.setInterval(clock,1000);
});

试着制作一个时钟

2 个答案: