Question

我已经列出了开放时间列表：

周一09:00 - 17:00 星期二09:00 - 17:00 等

我想知道是否有人可以告诉我在哪里可以找到关于如何突出我们当天的开放时间的教程。 IE周二，周二09：00-17：00为绿色，其余为正常字体颜色。

任何帮助表示感谢，我倾向于找到有关日历的文章，这不是我想要的。

干杯

Answer 1

您应该拥有如下所示的HTML结构：

<ul id="opening-times">
    <li>Sun 09:00 - 17:00</li>
    <li>Mon 09:00 - 15:00</li>
    <li>Tue 08:00 - 19:00</li>
    <li>Wed 09:00 - 20:00</li>
    <li>Thu 09:00 - 20:00</li>
    <li>Fri 09:00 - 20:00</li>
    <li>Sat 15:00 - 20:00</li>
</ul>

然后使用JavaScript，您可以执行以下操作以突出显示当天：

var days = document.getElementById("opening-times"),
    today = new Date().getDay(); // 0 to 6 where 0 is Sunday

days.children[today].style.color = "green";

如果你想把星期一放在第一位，那就把星期日移到列表的底部并使用这段代码：

var days = document.getElementById("opening-times"),
    today = new Date().getDay()-1;

if (today===-1) today = 6; // sunday
days.children[today].style.color = "green";

Answer 2

这样的事情：

HTML：

<ul>
    <li id="mon">Mon 09:00 - 17:00</li>
    <li id="tue">Tue 09:00 - 17:00</li>
    <li id="wed">Wed 09:00 - 17:00</li>
    <li id="thu">Thu 09:00 - 17:00</li>
    <li id="fri">Fri 09:00 - 17:00</li>
    <li id="sat">Sat 09:00 - 12:00</li>
    <li id="sun">Sun 09:00 - 12:00</li>
</ul>

JS：

var n = new Date();
var d = n.getDay();

if(d==0) document.getElementById('sun').style.color='#0b0';
if(d==1) document.getElementById('mon').style.color='#0b0';
if(d==2) document.getElementById('tue').style.color='#0b0';
if(d==3) document.getElementById('wed').style.color='#0b0';
if(d==4) document.getElementById('thu').style.color='#0b0';
if(d==5) document.getElementById('fri').style.color='#0b0';
if(d==6) document.getElementById('sat').style.color='#0b0';

http://jsfiddle.net/4wwmL09a/

编辑：所以Marco是第一个......

开幕时间列表突出显示日

2 个答案: