根據一天中的時間在html元素中實時更新內容

我試圖根據一天中的時間更新html元素內的內容，我正在做類似於以下內容的內容：Updating div content according to time但我希望內容更新沒有頁面刷新。根據一天中的時間在html元素中實時更新內容

代碼：

function schoolPeriod() { 
    var date = new Date(); 
    var h = date.getHours(); 
    var m = date.getMinutes(); 

    // prepend minutes with 0 if < 10 
    if (m < 10) { 
     m = "0" + m; 
    } 

    h = h.toString(); 
    m = m.toString(); 

    var t = h + m; 

    var periods = [ 
     "school assembly", 
     "first period", 
     "second period", 
     ]; 

     var currentPeriod = document.querySelector('.current-period'); 

     if (t >= 600) { 
      currentPeriod.innerHTML = "new school day"; 
     } 
     else if (t >= 900) { 
      currentPeriod.innerHTML = periods[0]; 
     } 
     else if (t >= 940) { 
      currentPeriod.innerHTML = periods[1]; 
     } 
     else if (t >= 1020) { 
      currentPeriod.innerHTML = periods[2]; 
     } 

    setTimeout(schoolPeriod, 1000); 
} 
schoolPeriod();

codepen：http://codepen.io/carpenumidium/pen/grRYoN?editors=1011

我在做什麼錯？感謝幫助！

來源

2016-07-03 carpenumidium

@nnnnnn那完全工作！謝謝！如果您將它作爲一個發佈，我會接受您的答案！ :) – carpenumidium

您需要顛倒if/else if/else if/else if測試的順序。

爲什麼？假設t爲1020.當前的if條件爲t >= 600將爲真，因此該塊將被執行而不是else if中的任何一個。（即使跳過if，1020也大於900且大於940 ...）如果測試一系列>=條件，則需要首先測試最高可能性。（您可能還想考慮添加最後的else聲明，因爲它還不是上午6:00。）

另外，t = h + m不符合您的預期，因爲它不允許使用一位數字分鐘（如果時間是上午10點03分，那麼h + m將是103）。相反，由100轉換小時和分鐘爲字符串，多個小時的：

var t = h * 100 + m;

注意，乘以100，不給你一分鐘數，只是很容易讓你做的比較與600爲早上6點，等

（還有其他事情可以做，以使功能更短，更可擴展的，但我所涉及的問題是阻止它的東西在其目前的形式工作。）

來源

2016-07-03 04:03:43 nnnnnn

> 10:03 am然後h + m將會是103 我照顧過，如果（m <10）{m =「0」+ m; }。但看起來你有更好的方式來做到這一點。 – carpenumidium

是的。請注意，我剛剛更新了我的答案中的部分時間，將小時乘以100而不是60。如果您需要對時間進行進一步計算，那麼這並不是最好的，但要獲得1020這個數字意味着您需要這個數字。 – nnnnnn

是的，我會使用它，如果我將計時器設置爲1000ms，會不會有任何性能提升？ – carpenumidium

試試這個：

function schoolPeriod() { 
     var date = new Date(); 
     var h = date.getHours(); 
     var m = date.getMinutes(); 

     var t = (h * 60) + m; 

     var selectedIndex = 0; 

     if (t >= 620) { 
      selectedIndex = 3; 
     } 
     else if (t >= 580) { 
      selectedIndex = 2; 
     } 
     else if (t >= 540) { 
      selectedIndex = 1; 
     } 

     var periods = [ 
      "new school day", 
      "school assembly", 
      "first period", 
      "second period", 
     ]; 

     document.querySelector('.current-period').innerHTML = periods[selectedIndex]; 

     setTimeout(schoolPeriod, 1000); 
    } 

    schoolPeriod();

來源

2016-07-03 04:00:28

你如果那麼else語句是錯誤的。它經常檢查(t >= 600)

與你替換此：

function schoolPeriod() { 
var date = new Date(); 
var h = date.getHours(); 
var m = date.getMinutes(); 

h = h.toString(); 
m = m.toString(); 

var t = h + m; 

var periods = [ 
    "school assembly", 
    "first period", 
    "second period", 
    ]; 

    var currentPeriod = document.querySelector('.current-period'); 

    if (t >= 600 && t< 900) { 
     currentPeriod.innerHTML = "new school day"; 
    } 
    else if (t >= 900 && t<940) { 
     currentPeriod.innerHTML = periods[0]; 
    } 
    else if (t >= 940 & t<1020) { 
     currentPeriod.innerHTML = periods[1]; 
    } 
    else if (t >= 1020) { 
     currentPeriod.innerHTML = periods[2]; 
    } 

setTimeout(schoolPeriod, 1000); 
} 

// Call the function 
schoolPeriod();

希望這將幫助你:)

來源

2016-07-03 04:02:40

嘗試這樣的事情，期間被設置在分鐘 - 360 = 6:00

var periods = [ 
 
['period 1',360,365], 
 
['period 2',365,400], 
 
['period 3',400,460], 
 
['period 4',460,520] 
 
]; 
 
function getPeriod(){ 
 
var period = 'School is closed'; 
 
var minutes = new Date().getHours()*60 + new Date().getMinutes(); 
 
for(var i=0;i<periods.length;i++){ 
 
    if(minutes>=periods[i][1] && minutes<periods[i][2]){ 
 
    period = periods[i][0]; 
 
    break; 
 
    } 
 
} 
 
document.getElementById('period').innerHTML = period; 
 
setTimeout(getPeriod,1000); 
 
}

<html> 
 
<head> 
 
</head> 
 
<body onload="getPeriod();"> 
 
<div id="period"></div> 
 
</body> 
 
</html>

來源

2016-07-03 04:02:52 ElDoRado1239

根據一天中的時間在html元素中實時更新內容

回答

相關問題