setInterval無法與特定功能

我有一個腳本，在瀏覽器的右上角用當前日期和時間創建一個欄。我試圖每隔三十秒更新一次，以便保持現場時間，而不僅僅是加載頁面的時間。您會看到我使用set_time（）函數onload創建了時間欄，然後創建一個旨在調用timer（）的setInterval，後者又通過再次調用set_time（）函數來更新時間。計時器清楚地觸發，因爲每4秒鐘我都會收到一個帶有「hi」（來自timer（）函數）的警告框，但是在此之後它應該調用set_time（）時，它不起作用。我應該在每次啓動定時器時都會收到「set time」（位於set_time（）函數末尾）的警報，而我不這樣做。任何人都可以幫忙嗎？setInterval無法與特定功能

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); 


}

來源

2012-12-20 ejfrancis

您是否在瀏覽器控制檯中發現任何錯誤？ – lonesomeday

您分配#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>';

來源

2012-12-20 20:27:26 Bergi

謝謝！我無法相信我忽略了這麼多次 – ejfrancis

如果你看看你的錯誤控制檯，你會看到，JavaScript的（之前的else）在這裏拋出一個「dateDiv沒有定義」的錯誤： dateDiv.innerHTML = '';

爲了避免（並獲得你的腳本工作），這樣做：

代碼div層到您的HTML（不創造E使用JavaScript的話），如下所示： <div id="dateTime"></div>
在末尾刪除else塊（現在是因爲步驟1）
此添加到set_time的頂部（）的多餘： var dateDiv = document.getElementById('dateTime');

來源

2012-12-20 20:37:06

這個頭文件是一個通用條，它將應用於多個頁面，因此在腳本中動態創建div對我來說是一個更好的選擇。但是，謝謝，這個解決方案也是合理的 – ejfrancis

setInterval無法與特定功能

回答

相關問題