如何制作inner.html select並展示<li>基於當前日期的元素？</li>
[英]How to make inner.html select and show <li> element based on current date?
問題描述
我正在嘗試制作一個 static web 頁面，其中加載時的索引頁面僅顯示一個基於當前日期的“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>
3 個解決方案
解決方案1
0 2022-09-05 20:13:59
您可以比較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>
解決方案2
0 2022-09-05 20:16:08
我建議您從 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>
解決方案3
0 2022-09-05 21:42:35
如果我理解正確，您希望在<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() let lastSat = todayDay?= 6: dayDifference. today.getTime()檢查今天是否是星期六，如果是，變量 lastSat 設置為今天（如果你總是想包含最后一個星期六，只需將 lastSat 設置為 dayDifference） let lastSat = dayDifference;
之后，我們創建一個 for 循環來獲取接下來的六個星期六，並將其存儲在變量output中。 在我們將<ul>的 innerHTML 設置為 output 並將<h1>設置為今天的日期之后。
@GrafiCode 的示例與我的類似，但我不認為他的節目只在星期六
根據條件替換未知命名元素的inner.html
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.