Question

我正在建立一个广播电台的网站，并希望显示当前播出的节目主持人。我已经构建了一个Web应用程序，其中包含演示者的数据：每个工作日的名称，照片，生物和开始/结束时间。

<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函数进行比较，您不必担心分钟功能，因为它们都处于小时的边界。请记住，那天是从星期日开始编号的

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

Answer 2

如果您已经在使用jQuery库。我建议你使用日期库来更容易阅读代码，也可以更易于维护 http://archive.plugins.jquery.com/project/jquery-dateFormat

timenow = $.format.date( new Date(), 'ddd h:mm a')
// returns Monday 6:22 AM

switch(timenow){
case 'Monday 1:00 PM':
    //do something
    break;
case 'Tuesday 3:00 PM':
    //do something
    break;
}

然后如果它总是在一小时内，只需省略分钟。使用格式'ddd h a' 所以你可以用SWITCH编写你的JavaScript

timenow = $.format.date( new Date(), 'ddd h a')
// returns Monday 6 AM

switch(timenow){
case 'Monday 1 PM':
case 'Monday 2 PM':
    //do something
    break;
case 'Tuesday 3 PM':
    //do something
    break;
}

但是如果你没有使用jquery，而你只想使用getDay（），那么普通的javascript

var days =["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var d = new Date();
var hr = d.getHours() % 12;

timenow = days[d.getDay()] + ' ' + hr + (d.getHours() > 12?'PM':'AM')

// returns "Monday 2PM"

需要注意的事项：通过AJAX获取当前的演示者来处理数据库

根据getDay和getHours + getMinutes显示div

2 个答案: