如何使inner.html根據當前日期選擇和顯示<li>元素？-有解無憂

我正在嘗試制作一個靜態網頁，其中加載時的索引頁面僅顯示一個基于當前日期的“li”元素。'li' 元素由一個日期（星期六）組成，我需要從 'li' 元素中的日期前一周開始顯示該元素，但不能超過該日期。（'li'包含最接近但不超過當前日期的日期。）

談到java腳本時完全自由，這可以使用java腳本完成嗎？是這樣嗎：我是否在使用inner.html 的正確軌道上？

幫助和提示將不勝感激！

let html = document.getElementById("myList").innerHTML;
document.getElementById("demo").innerHTML = html;

ul {
  display: none;
}

<html>

<head>
  <title>Index page</title>

</head>

<body>
  <h1>This Saturday</h1>
  <p>Here you can find the program for the upcoming Saturday. </p>
  <p id="demo"></p>
  <ul id="myList">
    <li><a href="2022-09-03.html" target="blank">2022-09-03</a></li>
    <li><a href="/2022-09-10.html" target="blank">2022-09-10</a></li>
    <li><a href="/2022-09-17.html" target="blank">2022-09-17</a></li>
    <li><a href="/2022-09-24.html" target="blank">2022-09-24</a></li>
    <li><a href="/2022-10-01.html" target="blank">2022-10-01</a></li>
    <li><a href="/2022-10-08.html" target="blank">2022-10-08</a></li>
    <li><a href="/2022-10-15.html" target="blank">2022-10-15</a></li>
  </ul>
  <div>
  </div>
</body>

</html>

uj5u.com熱心網友回復：

您可以比較Date物件，條件是：

活動日期 >= 今天

和

今天 >= 活動日 - 7 天

今天 (2022-09-05) 只顯示 2022-9-10 事件。

let demo = document.getElementById("demo")

// TODAY's DATE
let today = new Date()

document.querySelectorAll('#myList li').forEach(function(el) {
  // EVENT DATE
  let thisDate = new Date(el.textContent)
  
  let thisDateMinus7Days = new Date(el.textContent)
  // EVENT DATE - 7 DAYS
  thisDateMinus7Days.setDate(thisDateMinus7Days.getDate() - 7);

  // IF EVENT DATE IS IN RANGE, COPY THE LINK
  if (thisDate >= today && today >= thisDateMinus7Days) {
    document.getElementById("demo").append(el.children[0])
  }
})

ul {
  display: none;
}

<h1>This Saturday</h1>
<p>Here you can find the program for the upcoming Saturday. </p>
<p id="demo"></p>
<ul id="myList">
  <li><a href="2022-09-03.html" target="blank">2022-09-03</a></li>
  <li><a href="/2022-09-10.html" target="blank">2022-09-10</a></li>
  <li><a href="/2022-09-17.html" target="blank">2022-09-17</a></li>
  <li><a href="/2022-09-24.html" target="blank">2022-09-24</a></li>
  <li><a href="/2022-10-01.html" target="blank">2022-10-01</a></li>
  <li><a href="/2022-10-08.html" target="blank">2022-10-08</a></li>
  <li><a href="/2022-10-15.html" target="blank">2022-10-15</a></li>
</ul>
<div>
</div>

uj5u.com熱心網友回復：

我建議您從 JavaScript 呈現您的日期。這樣做的原因是 HTML 將只包含您想要顯示的任何內容，而不必隱藏任何內容。

創建一個日期陣列并過濾掉任何已過的日期。
陣列中剩余的日期應該都是未來或今天的日期。
過濾陣列中的第一個日期是最近的即將到來的日期或今天。

創建您的<a>標簽并將其呈現到頁面。

const dates = [
  '2022-09-03',
  '2022-09-10',
  '2022-09-17',
  '2022-09-24',
  '2022-10-01',
  '2022-10-08',
  '2022-10-15'
];

const today = new Date();

const upcomingDates = dates.filter(dateString => {
  const upcomingDate = new Date(dateString);
  return today <= upcomingDate;
});

const nearestUpcomingDate = upcomingDates[0];

if (typeof nearestUpcomingDate !== 'undefined') {
  const anchor = document.createElement('a');
  anchor.href = `/${nearestUpcomingDate}.html`;
  anchor.target = '_blank';
  anchor.textContent = nearestUpcomingDate;
  document.getElementById('demo').append(anchor);
}

<h1>This Saturday</h1>
<p>Here you can find the program for the upcoming Saturday.</p>

<div id="demo"></div>

uj5u.com熱心網友回復：

如果我理解正確，您希望在<h1>-Tag 中顯示當前日期，并希望創建一個從上一個星期六開始的串列，接下來的六個星期六：

function returnDate (date) {
    let day = date.getDate() < 10 ? "0"   date.getDate() : date.getDate();
    let month = date.getMonth()   1 < 10 ? `0${date.getMonth()   1}` : date.getMonth()   1;
    return `${date.getFullYear()}-${month}-${day}`; 
}

let today = new Date(); // gets today's date
let todayDay = today.getDay(); // gets the weekday of today, 0 = sunday / 6 = saturday

let dayDifference = today.getTime() - ((todayDay   1) * 86400000);
let lastSat = todayDay != 6 ? dayDifference : today.getTime();

let output = ``;

for (var i = 0; i < 7; i  ) {
    let date = returnDate(new Date(lastSat   (7 * i * 86400000)));
    output  = 
    `<li>
        <a href="${date}.html" target="blank">${date}</a>
    </li>`
}

document.getElementById('today').innerHTML = returnDate(today);
document.getElementById('listSaturdays').innerHTML = output;

<h1 id="today"></h1>
<ul id="listSaturdays"></ul>

回傳格式化為“ function returnDate (date) {}2022-09-05”的日期。

let dayDifference = today.getTime() - ((todayDay 1) * 86400000);此變數存盤上一個星期六的時間。today.getTime()獲取自大紀元 (1970-01-01) 以來的毫秒數，((todayDay 1) * 86400000)減去到上周六所需的毫秒數。一天 = 86400000。上周六的日期以自紀元以??來的毫秒數存盤

let lastSat = todayDay != 6 ? dayDifference : today.getTime()這將檢查今天是否是星期六，如果是，則變數 lastSat 設定為今天（如果您總是希望包含最后一個星期六，只需將 lastSat 設定為 dayDifference）let lastSat = dayDifference;

之后，我們創建一個 for 回圈來獲取接下來的六個星期六，并將其存盤在變數中output。在我們設定<ul>要輸出的 innerHTML 和<h1>今天的日期之后。

@GrafiCode 的示例與我的類似，但我不認為他的節目只在星期六

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/504142.html

標籤：javascript html

上一篇：檢查復選框是否被選中并警告“嗨”

下一篇：nodejs應用程式中的Javascript多次等待-有沒有更好的編碼方式？