如果满足条件，是否可以将边框添加到特定列表项？

Question

[好，所以我要在下面的星期几里制作一个JavaScript时钟，我希望在当天周围加上一些边框。我的时钟工作正常，但是我正在努力使用JavaScript在今天前后显示边框。页面上的布局如下：

                             00 : 00 : 00
                    Mon Tues Wed Thurs Fri Sat Sun

今天是星期一，所以我希望在“ Mon”周围有一个边界，依此类推，在相应的日期。我目前正在使用.getDay（）并使用IF语句确定.getDay（）值是否与我创建的数组匹配，如果匹配，请使用document.getElementById选择合适的过程列表项，并使用“ element。style.border = xxx，xxx，xxx;”

向其添加边框

这是我的代码当前的样子：

function showDay(){ 
    var day = new Date();
    var weekday = ['0', '1', '2', '3', '4', '5', '6'];
    dayNum = weekday[day.getDay()];
    if(dayNum == 0){
        document.getElementById('0').style.border = 2px solid #18CAE6;
    }
      if(dayNum == 1){
        document.getElementById('1').style.border = 2px solid #18CAE6;
    }
      if(dayNum == 2){
        document.getElementById('2').style.border = 2px solid #18CAE6;
    }
      if(dayNum == 3){
        document.getElementById('3').style.border = 2px solid #18CAE6;
    }
      if(dayNum == 4){
        document.getElementById('4').style.border = 2px solid #18CAE6;
    }
      if(dayNum == 5){
        document.getElementById('5').style.border = 2px solid #18CAE6;
    }
      if(dayNum == 6){
        document.getElementById('6').style.border = 2px solid #18CAE6;
    }
}
showDay();

Answer 1

我真的不明白怎么了。

虽然没有dayNum。

也为什么要使该数组毫无意义，因为

day.getDay()

已经给出一个整数，其中星期一将为1。

您可以让玛比使用这样的东西：

var day = new Date();
var dayNum = day.getDay();
document.getElementById(dayNum).style.border = 2px solid #18CAE6;

希望有帮助！

Answer 2

有几个原因它没有运行。首先，您需要将这些样式字符串用引号引起来，例如：

document.getElementById('0').style.border = '2px solid #18CAE6';

第二，HTML ID不能以（或仅仅是）数字开头。尝试将"div id='1'更改为"div id='day-1'"。以字母开头的内容。

您还可以通过查找重复图案来将其缩减很多。在每一行中，您都在说：“如果x是一天，则将边界放在元素x上”。因此，假设您已将ID更改为day-1，day-2等，则只需执行此操作即可，而不是所有这些情况：

function showDay(){ 
    var day = new Date();
    var weekday = ['0', '1', '2', '3', '4', '5', '6'];
    var dayNum = weekday[day.getDay()];

    document.getElementById('day-' + dayNum).style.border = "2px solid #18CAE6";
}

这都有意义吗？

Answer 3

它对您不起作用的主要原因是您忘记在边框值（例如" "）的周围加上括号"2px solid #18CAE6";。

我添加了一些示例div和一个按钮来测试动态应用边框。

注： .getDay()返回给定日期对象的星期几，为0-6，其中0代表星期日，6代表星期六。

---

下面测试：

function showDay(){ 
    let day = new Date();

    // you don't need the two lines below unless you are thinking of changing 
    // the ids of the elements to string representations
    // e.g. you can just do let dayNum = day.getDay();
    let weekday = ['0', '1', '2', '3', '4', '5', '6'];
    let dayNum = weekday[day.getDay()];

    if(dayNum == 0){
        document.getElementById('0').style.border = "2px solid #18CAE6";
    }
      if(dayNum == 1){
        document.getElementById('1').style.border = "2px solid #18CAE6";
    }
      if(dayNum == 2){
        document.getElementById('2').style.border = "2px solid #18CAE6";
    }
      if(dayNum == 3){
        document.getElementById('3').style.border = "2px solid #18CAE6";
    }
      if(dayNum == 4){
        document.getElementById('4').style.border = "2px solid #18CAE6";
    }
      if(dayNum == 5){
        document.getElementById('5').style.border = "2px solid #18CAE6";
    }
      if(dayNum == 6){
        document.getElementById('6').style.border = "2px solid #18CAE6";
    }
}

div {
  position: relative;
  float: left;
  margin-left: 10px;
  padding: 20px;
  border: none;
}

<div id="0">Sun</div>
<div id="1">Mon</div>
<div id="2">Tues</div>
<div id="3">Wed</div>
<div id="4">Thur</div>
<div id="5">Fri</div>
<div id="6">Sat</div>


<input type="button" value="Apply border" onclick="showDay()" />