显示基于getDay和getHours + getMinutes的div [英] Show div based on getDay and getHours + getMinutes

问题描述

我正在为电台建立一个网站，并希望显示哪位演讲者目前正在播出。我已经建立了一个包含演示者的数据的网络应用程序：每个工作日的名称，照片，生物和开始/结束时间。

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

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

解决方案

您可以与getHours和getDay功能进行比较，如下所示，您不必担心分钟功能，因为它们都坐在小时的边界只要记住那一天是从星期日起索引0

  //隐藏所有的divs 
 var d = new Date （）; 
 var weekday = d.getDay（）; 
 var hours = d.getHours（）; 
 // 12至6pm从星期一到星期五
如果（小时> = 12&&小时< 18&&&&&&&&&<工作日< 6） {
开关（工作日）{
案例1：
 //显示星期一
休息; 
 case 2：
 //显示tuesday 
 break; 
案例3：
 //显示wed 
 break; 
案例4：
 //显示thur 
 break; 
案例5：
 //显示星期五
休息; 
} 
 //星期六6到9 
} else if（weekday == 6&&小时> = 6&&小时< 9）{
 //显示星期六
} else if（weekday == 0）{
 //显示星期日
} 
  

编辑：根据你的请求，一个简单的模块化实现

  var schedule = [ 
 {starthour：12，endhour：18，weekday：1，div：div1}，
 {starthour：18，endhour工作日：1，div：div2} 
] 
 var d = new Date（）; 
 var weekday = d.getDay（）; 
 var hours = d.getHours（）; 
 var i; （i = 0; i< schedule.length; i ++）{
 if（schedule [i] .starthour> = hours&&& schedule [i] .endhour< hours& ;& schedule [i] .weekday == weekday）{
 //显示日程表[i] .div 
} 
} 
  

I am building a website for a radio station and want to show which presenter is currently on air. I have built a web app that contains data on the presenter: name, photo, bio and start/end times for each weekday.

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

What I would like to do is use Javascript functions getDay() and getHours() + getMinutes() to show only the presenter that is scheduled to be on air based on the times specified in the app.

The main part I am having difficulty with is with determining whether this presenter falls within the current time and then showing/hiding the div as necessary.

Any help or guidance on how I can acheive this would be greatly appreciated.

解决方案

You can just compare with the getHours and getDay function as follows, you don't have to worry about the minutes function as they all sit on the boundaries of hours. Just remember that day is 0 indexed from Sunday

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

Edit: as per your request heres a simple modular implementation

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

这篇关于显示基于getDay和getHours + getMinutes的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！