通過Javascript反轉HTML段落列表

Question

我使用Javascript（無jQuery）創建段落列表以獲得最佳睡眠時間（基於REM睡眠週期）並將其顯示在頁面上， here's the code。

function sleepnow() { 
    var result = ''; 
    var a = new Date(); 
    var hour = a.getHours(); 

    var minutes = a.getMinutes() + 14; 
    if (minutes > 60) { 
     minutes = minutes - 60; 
     hour = hour + 1; 
    } 

    for (var counter = 0; counter < 6; counter++) { 
     if (minutes < 30) { 
      minutes = minutes + 30; 
     } else { 
      minutes = minutes - 30; 
      hour = hour + 1; 
     } 
     hour = hour + 1; 

     if (hour >= 24) { 
      if (hour === 24) { 
       hour = 0; 
      } else if (hour === 25) { 
       hour = 1; 
      } 
     } 

     if (hour > 9) { 
      result = result + '<p>' + hour; 
     } else { 
      result = result + '<p>0' + hour; 
     } 

     if (minutes > 9) { 
      result = result + ':' + minutes + '</p>'; 
     } else { 
      result = result + ':0' + minutes + '</p>'; 
     } 
    } 
    document.getElementById('sleepnow').innerHTML = result; 
} 

如何反轉該列表以顯示更遠的一個等等？我嘗試了一個小時.reverse（），但我無法使它工作，它只是翻轉一切，包括標籤，打破了一切。

Answer 1

我想從html中分離出更多的數據。而不是建立一個字符串，建立一個數組。然後，您可以在構建html字符串時以相反順序循環。

1. create data structure, contains only numbers, no html (model) 
2. convert data to html (view) 

var html = ''; 
for (var counter = YOURDATA.length-1; counter >= 0; counter--) { 
    var t = YOURDATA[counter]; 
    html += ' build your string ' + t + '...'; 
} 

而且這種情況下應該沒事，但要小心，在原始數據的特殊字符（& <> \「」）。一般來說，您應該轉義所有數據，以獲得html上下文。

Answer 2

首先：答案是：通過使用中間累加器字符串變量currentOne通常累積並通過在結果中的其他順序累加：結果= currentOne +導致的代替結果=結果+ currentOne。享受：

function sleepnow() { 
var result = ''; 
var a = new Date(); 
var hour = a.getHours(); 

var minutes = a.getMinutes() + 14; 
if (minutes > 60) { 
    minutes = minutes - 60; 
    hour = hour + 1; 
} 

for (var counter = 0; counter < 6; counter++) { 
var currentOne = ""; 

    if (minutes < 30) { 
     minutes = minutes + 30; 
    } else { 
     minutes = minutes - 30; 
     hour = hour + 1; 
    } 
    hour = hour + 1; 

    if (hour >= 24) { 
     if (hour === 24) { 
      hour = 0; 
     } else if (hour === 25) { 
      hour = 1; 
     } 
    } 

    if (hour > 9) { 
     currentOne = currentOne + '<p>' + hour; 
    } else { 
     currentOne = currentOne + '<p>0' + hour; 
    } 

    if (minutes > 9) { 
     currentOne = currentOne + ':' + minutes + '</p>'; 
    } else { 
     currentOne = currentOne + ':0' + minutes + '</p>'; 
    } 

result = currentOne + result; 
} 
document.getElementById('sleepnow').innerHTML = result; 
} 

第二：請不要在沒有完全描述對方的情況下進行外部鏈接。外部鏈接可能過期，變得無關緊要，等

三：你在代碼所做挺亂的在那裏:)