javascript - 根据 getDay 和 getHours + getMinutes 显示 div

Question

我正在为一家广播电台建立一个网站，并希望显示当前正在播出的主持人。我构建了一个网络应用程序，其中包含演示者的数据:姓名、照片、个人简介以及每个工作日的开始/结束时间。

<div id="presenter1">
    <div class="slot">
        <div id="sunday-off"> - </div>
        <div id="monday-afternoon">12:00 - 15:59</div>
        <div id="tuesday-afternoon">12:00 - 15:59</div>
        <div id="wednesday-afternoon">12:00 - 15:59</div>
        <div id="thursday-afternoon">12:00 - 15:59</div>
        <div id="friday-afternoon">12:00 - 15:59</div>
        <div id="saturday-morning">06:00 - 08:59</div>
    </div>
</div>

我想要做的是使用 Javascript 函数 getDay() 和 getHours() + getMinutes() 来仅显示根据应用程序中指定的时间安排播出的演示者。

我遇到的主要困难是确定该演示者是否属于当前时间，然后根据需要显示/隐藏 div。

任何关于如何实现这一目标的帮助或指导将不胜感激。

Answer 1

您可以像下面这样与 getHours 和 getDay 函数进行比较，您不必担心分钟函数，因为它们都位于小时的边界上。请记住，从星期日开始索引的那一天是 0

//Hide all the divs up here
var d = new Date();
var weekday = d.getDay();
var hours = d.getHours();
//    between 12 and 6pm           From monday  to friday
if (hours >= 12 && hours < 18 && weekday > 0 && weekday < 6) {
   switch(weekday) {
      case 1:
          //Show monday
          break;
      case 2:
          //Show tuesday
          break;
      case 3:
          //Show wed
          break;
      case 4:
          //Show thur
          break;
      case 5:
          //Show fri
          break;
    }
//          Saturday         between 6 and 9
} else if (weekday == 6 && hours >=6 && hours < 9) {
  //Show saturday
} else if (weekday == 0) {
  //Show sunday
}

编辑:根据您的要求，这是一个简单的模块化实现

var schedule = [
    {"starthour":12, "endhour":18, "weekday":1, "div":"div1"},
    {"starthour":18, "endhour":20, "weekday":1, "div":"div2"}
]
var d = new Date();
var weekday = d.getDay();
var hours = d.getHours();
var i;
for (i = 0; i < schedule.length; i++) {
    if (schedule[i].starthour >= hours && schedule[i].endhour < hours && schedule[i].weekday == weekday) {
        //Show schedule[i].div
    }
}