Question

我有一个脚本，可以在浏览器的右上角创建一个带有当前日期和时间的栏。我试图每30秒更新一次，以便保持实时，而不仅仅是页面加载的时间。您将看到我使用set_time（）函数onload创建时间栏，然后创建一个setInterval，用于调用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 not defined'错误（就在else之前）： dateDiv.innerHTML = '';

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

将div图层编码为HTML（不要使用javascript创建），如下所示： <div id="dateTime"></div>
删除最后的else块（由于步骤1，它现在是多余的）
将此添加到set_time（）的顶部： var dateDiv = document.getElementById( 'dateTime' );

setInterval无法使用特定功能

2 个答案: