[英]Active list element depending on day of week
I'm currently working on a website utilizing HTML, JavaScript and CSS(Big woop - I know).我目前正在使用 HTML、JavaScript 和 CSS(Big woop - 我知道)的网站上工作。
I'm running bootstrap to learn how to make a website a bit more responsive.我正在运行引导程序来学习如何使网站更具响应性。 I'm currently trying to learn the different date functions in JavaScript and want my website to highlight different list-elements depending on what day of the week it is.我目前正在尝试学习 JavaScript 中的不同日期函数,并希望我的网站根据星期几突出显示不同的列表元素。
<ul class="list-group">
<li class="list-group-item" >Mondays: 09:00 - 16:00</li>
<li class="list-group-item">Tuesdays: 09:00 - 16:00</li>
<li class="list-group-item">Wednesdays: 09:00 - 16:00</li>
<li class="list-group-item">Thursdays: 09:00 - 16:00</li>
<li class="list-group-item">Fridays: 09:00 - 12:00</li>
<li class="list-group-item">Saturdays: Closed</li>
<li class="list-group-item">Sundays: Closed</li>
</ul>
The list itself is a standard unordered list which displays opening hours and what I want to create through JavaScript is that if the website senses that today is Monday it'll highlight Monday.该列表本身是一个标准的无序列表,它显示开放时间以及我想通过 JavaScript 创建的内容是,如果网站感觉到今天是星期一,它将突出显示星期一。
I have written the following code to get the website to check date:我编写了以下代码来让网站检查日期:
function daysOpen(){
let daysOfWeek = ['Sunday','Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let dateObject = new Date()
let today = dateObject.getDay();
//console.log("Today is: " + today); // generates output to console
//console.log(daysOfWeek[today]) <- This is used for debugging
if(daysOfWeek[today] === 'Saturday' || daysOfWeek[today] ==='Sunday'){ // This piece of code lets me check date from
//system time(?) and compare against my array to see if today is open or closed
console.log("Store is closed")
}
else
{
console.log("The store is open")
}
} }
This is where I get stuck.这就是我卡住的地方。 I'm not sure how to use the if-statements to highlight the list elements and I haven't been able to find a good example or guide online.我不确定如何使用 if 语句来突出显示列表元素,并且我无法在网上找到一个好的示例或指南。 The most similar question I could find was this: text depend on time of day and day of week我能找到的最相似的问题是: 文本取决于一天中的时间和一周中的一天
But I'm still having troubles understanding how to continue.但我仍然无法理解如何继续。
Any help is greatly appreciated.任何帮助是极大的赞赏。
You can alter html like as follows.您可以按如下方式更改 html。
function daysOpen() { let daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; let dateObject = new Date() let today = dateObject.getDay(); if (daysOfWeek[today] === 'Saturday' || daysOfWeek[today] === 'Sunday') { let elem = document.querySelector("li.day-" + today); elem.classList.add("highlight"); console.log("Store is closed") } else { console.log("The store is open") } } daysOpen();
li.highlight { background-color: red; }
<ul class="list-group"> <li class="list-group-item day-1">Mondays: 09:00 - 16:00</li> <li class="list-group-item day-2">Tuesdays: 09:00 - 16:00</li> <li class="list-group-item day-3">Wednesdays: 09:00 - 16:00</li> <li class="list-group-item day-4">Thursdays: 09:00 - 16:00</li> <li class="list-group-item day-5">Fridays: 09:00 - 12:00</li> <li class="list-group-item day-7">Saturdays: Closed</li> <li class="list-group-item day-0">Sundays: Closed</li> </ul>
Changes added are添加的更改是
- Added custom css for highlighted class为突出显示的 class 添加了自定义 css
- Added unique class name based on day code for each class根据每个 class 的日期代码添加了唯一的 class 名称
- Added class highlight based on our If condition根据我们的 If 条件添加了 class 突出显示
Don't forget to initialize the function call when needed不要忘记在需要时初始化 function 调用
Suggestion : If possible pass the date from back-end code would be more trusty.建议:如果可能的话,从后端代码传递日期会更可靠。 Plugin like jQuery helps us to reduce our efforts to write these kind of codes and reduces line of codes too.像 jQuery 这样的插件可以帮助我们减少编写此类代码的工作量并减少代码行数。
A shorter way with a ternary operator.使用三元运算符的更短的方法。 If you just need to retrieve the day you can chain Day() method like this.如果您只需要检索日期,您可以像这样链接 Day() 方法。
Edit: I added a method if you want to set a style for the active day and another for all the inactive days编辑:我添加了一种方法,如果您想为活动日设置样式,为所有非活动日设置另一种样式
/*first method only highlight active day*/ let today = new Date().getDay(); let okDay = document.getElementById(today); today?== 0 && today.== 6. okDay:classList.add("open-day"). okDay;classList.add("close-day"); /********************* *edit second method * *********************/ const weekDays = document.querySelectorAll("li[data-day]"). function getCurrentDay() { Array.prototype,map.call(weekDays. d => { +d?dataset.day === today && (today.== 0 || today:== 6). d.classList;add("open-day"); d;classList.add("close-day"); }); } getCurrentDay();
* { box-sizing: border-box; }.list-group-item { list-style: none; color: gray; }.open-day { width: 100%; padding: 5px; background-color: coral; color: white; font-size: 18px; }.close-day { width: 100%; padding: 5px; background-color: #333333; color: white; font-size: 18px; }
<ul class="list-group"> <li class="list-group-item" id="1">Mondays: 09:00 - 16:00</li> <li class="list-group-item" id="2">Tuesdays: 09:00 - 16:00</li> <li class="list-group-item" id="3">Wednesdays: 09:00 - 16:00</li> <li class="list-group-item" id="4">Thursdays: 09:00 - 16:00</li> <li class="list-group-item" id="5">Fridays: 09:00 - 12:00</li> <li class="list-group-item" id="6">Saturdays: Closed</li> <li class="list-group-item" id="0">Sundays: Closed</li> </ul> <ul class="list-group"> <li class="list-group-item" data-day="1">Mondays: 09:00 - 16:00</li> <li class="list-group-item" data-day="2">Tuesdays: 09:00 - 16:00</li> <li class="list-group-item" data-day="3">Wednesdays: 09:00 - 16:00</li> <li class="list-group-item" data-day="4">Thursdays: 09:00 - 16:00</li> <li class="list-group-item" data-day="5">Fridays: 09:00 - 12:00</li> <li class="list-group-item" data-day="6">Saturdays: Closed</li> <li class="list-group-item" data-day="0">Sundays: Closed</li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.