setInterval 不适用于特定功能

Question

我有一个脚本，可以在浏览器的右上角创建一个带有当前日期和时间的栏。我试图每三十秒更新一次，以便它保持实时，而不仅仅是页面加载的时间。您会看到我使用 set_time() 函数 onload 创建了时间条，然后创建了一个 setInterval 来调用 timer()，而 timer() 又通过再次调用 set_time() 函数来更新时间。计时器显然正在触发，因为每 4 秒我都会收到一个带有“hi”的警报框（来自 timer() 函数），但是当它应该在此之后调用 set_time() 时它不起作用。每次触发计时器时，我都应该收到带有“设置时间”的警报（位于 set_time() 函数的末尾），但我没有。有人可以帮忙吗？

window.onload = function(){
    set_time();
    window.setInterval(timer, 4000);
};

function timer(){
    alert('hi');
    set_time();
}

function set_time(){

    //create date object to manipulate
    var d = new Date();

    //current day of the week
    var d_names= new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");
    curr_day = d.getDay();


    //current date
    var m_names = new Array("January", "February", "March", 
    "April", "May", "June", "July", "August", "September", 
    "October", "November", "December");

    var curr_date = d.getDate();
    var curr_month = d.getMonth();
    var curr_year = d.getFullYear();

    //current Time
    var a_p = "";

    var curr_hour = d.getHours();
    if (curr_hour < 12)
       {
       a_p = "a.m.";
       }
    else
       {
       a_p = "p.m.";
       }
    if (curr_hour == 0)
       {
       curr_hour = 12;
       }
    if (curr_hour > 12)
       {
       curr_hour = curr_hour - 12;
       }

    var curr_min = d.getMinutes();
    curr_min = curr_min + "";

    if (curr_min.length == 1)
       {
       curr_min = "0" + curr_min;
       }

    element = document.getElementById('dateTime');
    if(element){
    //if dateDiv already exists, update contents
    dateDiv.innerHTML = '';
    dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
}
else{
    //else create new dateDiv and append it to DOM body
    var dateDiv = document.createElement('div');
    dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
        dateDiv.id = 'dateTime';
        document.body.appendChild(dateDiv);
    }

    alert('set time');

    //setTimeout("set_time()", 3000);


}

Answer 1

您将#dateTime div 分配给element 变量，甚至检查它是否存在，但是当您确认element 存在时，您使用dateDiv 变量。那个是未定义的，并在设置其innerHTML 属性时引发异常；您应该能够在浏览器的错误控制台中看到它。

改用此代码：

var element = document.getElementById('dateTime');
if (!element) {
    element = document.createElement('div');
    document.body.appendChild(element);
}
element.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';

Answer 2

如果您查看错误控制台，您会看到 javascript 在此处抛出“dateDiv 未定义”错误（就在 else 之前）： dateDiv.innerHTML = '';

为避免这种情况（并使您的脚本正常工作），请执行以下操作：

1. 将 div 层编码到您的 HTML 中（不要使用 javascript 创建它），如下所示： <div id="dateTime"></div>

2. 删除末尾的 else 块（由于第 1 步，它现在是多余的）

3. 将此添加到 set_time() 的顶部： var dateDiv = document.getElementById( 'dateTime' );