如何制作inner.html select并展示<li>基于当前日期的元素？</li>
[英]How to make inner.html select and show <li> element based on current date?
问题描述
I'm trying to make a static web page where the index page on loading shows only one 'li'-element based opon the current date.
我正在尝试制作一个 static web 页面，其中加载时的索引页面仅显示一个基于当前日期的“li”元素。 The 'li'-elements consist of a date (a Saturday), and I need the elemt to be displayed from the one week before the date in the 'li'-element, but no longer than that date.(The 'li' containing a date nearest, but not past, the current date.) 'li' 元素由一个日期（星期六）组成，我需要从 'li' 元素中的日期前一周开始显示该元素，但不能超过该日期。（'li'包含最接近但不超过当前日期的日期。）
Totally freesh when it comes to java script, can this be done using java script? java 脚本完全免费，这可以使用 java 脚本完成吗？ Is so: am I on the rigth track using inner.html?是这样吗：我是否在使用 inner.html 的正确轨道上？
Help and tips will be higly appreciated!帮助和提示将不胜感激！
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
You can compare Date objects, with the conditions being:您可以比较Date对象，条件是：
- Event date >= today活动日期 >= 今天
And和
- Today >= Event day - 7 days今天 >= 活动日 - 7 天
Today (2022-09-05) only shows 2022-9-10 event.今天 (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
I'd suggest that you render your dates from JavaScript.我建议您从 JavaScript 呈现您的日期。 The reason for this is that the HTML will only contain whatever you want to show, without having to hide anything.这样做的原因是 HTML 将只包含您想要显示的任何内容，而无需隐藏任何内容。
Create an array of your dates and filter out any dates that have passed.创建一个日期数组并过滤掉任何已过的日期。
The remaining dates in the array should all be dates in the future or today.数组中剩余的日期应该都是未来或今天的日期。
The first date in the filtered array is the nearest upcoming date or today.过滤数组中的第一个日期是最近的即将到来的日期或今天。
Create your <a> tag and render it to the page.创建您的<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
If i understood correctly, you want to display the current date in the <h1> -Tag and want to create a list starting with the last Saturday, following the next six Saturdays:如果我理解正确，您希望在<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>
The function returnDate (date) {} gives back the date formatted into this "2022-09-05". function returnDate (date) {}返回格式化为“2022-09-05”的日期。
let dayDifference = today.getTime() - ((todayDay + 1) * 86400000); This variable stores, when the last saturday was.此变量存储上一个星期六的时间。 today.getTime() gets the milliseconds since the Epoche (1970-01-01), ((todayDay + 1) * 86400000) substracts the amount of milliseconds needed to get to last saturday. today.getTime()获取自纪元 (1970-01-01) 以来的毫秒数， ((todayDay + 1) * 86400000)减去到上周六所需的毫秒数。 One day = 86400000. The Date of last Saturday is stored in milliseconds since the Epoche一天 = 86400000。上周六的日期以自纪元以来的毫秒数存储
let lastSat = todayDay?= 6: dayDifference. today.getTime() let lastSat = todayDay?= 6: dayDifference. today.getTime() This checks if today is a saturday, if so, the variable lastSat is set to today (if you always want to have the last saturday included, just set lastSat to dayDifference) let lastSat = dayDifference; let lastSat = todayDay?= 6: dayDifference. today.getTime()检查今天是否是星期六，如果是，变量 lastSat 设置为今天（如果你总是想包含最后一个星期六，只需将 lastSat 设置为 dayDifference） let lastSat = dayDifference;
After that we create a for-loop to get the next six Saturdays and we store it in the variable output .之后，我们创建一个 for 循环来获取接下来的六个星期六，并将其存储在变量output中。 After we set the innerHTML of the <ul> to output and the <h1> to todays date.在我们将<ul>的 innerHTML 设置为 output 并将<h1>设置为今天的日期之后。
@GrafiCode's example is similar to mine, but i dont think his shows only Saturdays @GrafiCode 的示例与我的类似，但我不认为他的节目只在星期六
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.