css HTML自动突出显示打开表中的当前日期

rjee0c15 于 2023-04-08 发布在其他

关注(0)|答案(3)|浏览(146)

请注意，我们刚刚开始HTML和CSS，所以很抱歉的基本问题。
我们必须为一个学校项目做一个网站，由我们选择主题或事情。我选择了我叔叔的金属加工店。我想实现一个营业时间表。我搜索了网络，发现我必须使用JavaScript来完成这个，我从来没有使用过。我尝试了一些东西，但它不起作用。
它应该获取当前日期，然后通过工作日ID获取<tr>，并添加一个CSS类以进行进一步的格式化。

<i>

    function weekday() {
        var d = new Date();
        
        if (d.getDay() = 0)     {
                            document.getElementById("Sunday").classList.add('OpeningDay');
                            }
        
        if (d.getDay() = 1)     {
                            document.getElementById("Monday").classList.add('OpeningDay');
                            }
        
        if (d.getDay() = 2)     {
                            document.getElementById("Tuesday").classList.add('OpeningDay');
                            }
        
        if (d.getDay() = 3)     {
                            document.getElementById("Wednesday").classList.add('OpeningDay');
                            }
        
        if (d.getDay() = 4)     {
                            document.getElementById("Thursday").classList.add('OpeningDay');
                            }
        
        if (d.getDay() = 5)     {
                            document.getElementById("Friday").classList.add('OpeningDay');
                            }
        
        if (d.getDay() = 6)     {
                            document.getElementById("Saturday").classList.add('OpeningDay');
                            }                   
                        }

</i>

我想我可以用CASE Of来实现，但正如我所说的，我从来没有使用过Javascript

css

来源：https://stackoverflow.com/questions/48347670/html-automatically-highlight-current-day-in-opening-table

3条答案

按热度按时间

nhhxz33t1#

甚至简单！

weekday();

function weekday() {
  var d = new Date().getDay();
  document.getElementById("day-"+d).classList.add('opening-day');    
}

.opening-day { 
  background-color: yellow; 
}

<div id="day-0">
  Sunday
</div>
<div id="day-1">
  Monday
</div>
<div id="day-2">
  Tuesday
</div>
<div id="day-3">
  Wednesday
</div>
<div id="day-4">
  Thursday
</div>
<div id="day-5">
  Friday
</div>
<div id="day-6">
  Saturday
</div>

赞(0）回复(0）举报 2023-04-08

pieyvz9o2#

.OpeningDay { background-color: yellow; }

<div id="Sunday">
Sunday
</div>
<div id="Monday">
Monday
</div>
<div id="Tuesday">
Tuesday
</div>
<div id="Wednesday">
Wednesday
</div>
<div id="Thursday">
Thursday
</div>
<div id="Friday">
Friday
</div>
<div id="Saturday">
Saturday
</div>

weekday();

function weekday() {
    var d = new Date();

    if (d.getDay() == 0)     {
                        document.getElementById("Sunday").classList.add('OpeningDay');
                        }

    if (d.getDay() == 1)     {
                        document.getElementById("Monday").classList.add('OpeningDay');
                        }

    if (d.getDay() == 2)     {
                        document.getElementById("Tuesday").classList.add('OpeningDay');
                        }

    if (d.getDay() == 3)     {
                        document.getElementById("Wednesday").classList.add('OpeningDay');
                        }

    if (d.getDay() == 4)     {
                        document.getElementById("Thursday").classList.add('OpeningDay');
                        }

    if (d.getDay() == 5)     {
                        document.getElementById("Friday").classList.add('OpeningDay');
                        }

    if (d.getDay() == 6)     {
                        document.getElementById("Saturday").classList.add('OpeningDay');
                        }                   
                    }

小提琴https://jsfiddle.net/hcxnpk5r/

赞(0）回复(0）举报 2023-04-08

x7rlezfr3#

If condition应该是布尔值，比如d.getDay（）== 0。你正在做的是一个赋值。

赞(0）回复(0）举报 2023-04-08