如何制作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.