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

Answer 2

你应该在问之前尝试过一些东西..无论如何，这是一种快速n-dirty的方法

var days = ['MaaKnop', 'DinKnop', 'WoeKnop', 'DonKnop', 'VriKnop', 'ZatKnop', 'ZonKnop'];

var current_day = new Date().getDay();

document.getElementById(days[current_day - 1]).style.color = "#f00";

// or you could add a css class
document.getElementById(days[current_day - 1]).className = "active";

.active{
    color: red;
}