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
    }
}