【问题标题】:Show / hide div depending on day and time根据日期和时间显示/隐藏 div
【发布时间】:2019-10-30 03:52:55
【问题描述】:

我正在尝试根据日期和时间显示特定的 div。

在周一至周五上午 8 点至晚上 7 点以及周六上午 8:30 至下午 4 点期间,将显示带有“我们营业”消息的 div。在这些时间之外,将显示一个关闭的消息 div。

我已经看到其他帖子 (jquery - show / hide div depending on day and time) 一天实现了这一目标,但没有针对两个不同的一天组和不同的开放时间集,我无法弄清楚如何让它发挥作用。

任何帮助将不胜感激

【问题讨论】:

  • 看了你提到的帖子后,你有没有尝试过?

标签: javascript jquery


【解决方案1】:

你可以这样做:

<script>
function ShowOnTime(element){

    var daysWorking = [{dayWorking: 1, startTimeWorking: '8', endTimeWorking: '19'}, {dayWorking: 2, startTimeWorking: '8', endTimeWorking: '19'}, {dayWorking: 3, startTimeWorking: '8', endTimeWorking: '19'}, {dayWorking: 4, startTimeWorking: '8', endTimeWorking: '19'}, {dayWorking: 5, startTimeWorking: '8', endTimeWorking: '19'}, {dayWorking: 6, startTimeWorking: '830', endTimeWorking: '16'}];
    var a = new Date(); 
    var nowDay = a.getDay(); //0-6 denotes Sunday, monday, tuesday etc etc.
    var nowHours = a.getHours();
    var nowMinutes = a.getMinutes();

    if(daysWorking.find(o => o.dayWorking === nowDay)){
        if (daysWorking.find(o => o.startTimeWorking <= (nowHours+''+nowMinutes)) && daysWorking.find(o => o.endTimeWorking >= (nowHours+''+nowMinutes))) {
            $(element).show();
        } else {
            $(element).hide();
        }
    } else {
        $(element).hide();
    }

}

$(document).ready(function(){
    ShowOnTime("#TestDiv"); 
});
</script>

希望,这会给你一些想法。

【讨论】:

    【解决方案2】:

    您只需要在该答案中为星期六再添加一个条件

    var Now = new Date('11/4/2019 10:11:00');
     var CurrentDay = Now.getDay();
     if (CurrentDay!=6)
     {
          var OpenHour=8;
          var OpenMin=0;
          var CloseHour=19;
          var CloseMin=0;
     }
     else
     {
     var OpenHour=8;
          var OpenMin=30;
          var CloseHour=16;
          var CloseMin=0;
     }
    var  OpeningTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), OpenHour, OpenMin);
    var  ClosingTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), CloseHour, CloseMin);
    var  Open = (Now.getTime() > OpeningTime.getTime() && Now.getTime() < ClosingTime.getTime());
    if (CurrentDay !== 0 && Open) {
            $('.openstatus').toggle();
        }
    .hours {
          display:none;  
        }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <div class="hours openstatus">We are OPEN</div>
        <div class="closed openstatus">We are CLOSED</div>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-08-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多