javascript - 如何根据今天的日期更改 ID 颜色

Question

这就是我所拥有的:

<div class="listWeek">
   <a href="#" onclick="showMaa();"  id="MaaKnop">Mo</a>
   <a href="#" onclick="showDin();"  id="DinKnop">Tu</a>
   <a href="#" onclick="showWoe();"  id="WoeKnop">We</a>
   <a href="#" onclick="showDon();"  id="DonKnop">Th</a>
   <a href="#" onclick="showVri();"  id="VriKnop">Vr</a>
   <a href="#" onclick="showZat();"  id="ZatKnop">Sa</a>
   <a href="#" onclick="showZon();"  id="ZonKnop">Su</a>
</div>

我想根据今天改变当天的颜色。

Answer 1

HTML:

<div class="listWeek">
 <a href="#" data-val="1" id="MaaKnop">Mo</a>
 <a href="#" data-val="2" id="DinKnop">Tu</a>
 <a href="#" data-val="3" id="WoeKnop">We</a>
 <a href="#" data-val="4" id="DonKnop">Th</a>
 <a href="#" data-val="5" id="VriKnop">Vr</a>
 <a href="#" data-val="6" id="ZatKnop">Sa</a>
 <a href="#" data-val="0" id="ZonKnop">Su</a>
</div>

JS:

var s = document.getElementsByTagName('a');
var date = new Date();
for (var i = 0; i < s.length; i++) {
    if (s[i].getAttribute("data-val") == date.getDay()) {
        s[i].style.color = "red"
    }
}

1. 我使用了自定义 data-* 属性
2. date.getDay() 返回当前日期，数字范围从 0 - 6 开始，基于我设计的代码。
3. 获取标签列表并迭代它。一旦找到当天的匹配项，颜色就会改变。

希望你能理解。

JSFiddle