基于日期和时间（周和周末）的显示分区

我正在根据一天中的时间显示或隐藏分区（班级=小时）的项目。在以前的问题中，我已经能够在你的集体天才的帮助下工作。然而！我需要在周末和周日有不同的时间（周末从800到1400，平日从600到1600）。基于日期和时间（周和周末）的显示分区

我试着操作一个javascript函数，我能够工作（尝试了很多其他的解决方案后），它似乎没有工作。请帮忙！

代码的第一个例子是我如何才能让工作日工作。下面是带有else if语句的代码，用于周末。

$(document).ready(function() { 

    var d = new Date(); 
    var dayOfWeek = d.getDay(); 
    var hour = d.getHours(); 
    var mins = d.getMinutes(); 
    var status = 'open'; 

    //Weekday hours 6AM to 4PM 

    if (dayOfWeek !== 6 && dayOfWeek !== 0 && hour >= 6 && hour <= 16){ 
     if (hour=='6' && mins < '30'){ 
      status = 'closed'; 
     }else if (hour=='16' && mins > '30'){ 
      status = 'closed'; 
     }else{ 
      status = 'open'; 
     } 
    }else{ 
     status = 'closed'; 
    } 

    if (status=='open') { 
     $('.hours').show(); 

    }else{ 
     $('.hours').hide(); 

    }; 

});

这里是我操纵，希望通过增加做出不同的周末小时的代码，否则，如果在现有的代码语句。

$(document).ready(function() { 

    var d = new Date(); 
    var dayOfWeek = d.getDay(); 
    var hour = d.getHours(); 
    var mins = d.getMinutes(); 
    var status = 'open'; 

    //Weekday hours 6AM to 4PM 

    if (dayOfWeek !== 6 && dayOfWeek !== 0 && hour >= 6 && hour <= 16){ 
     if (hour=='6' && mins < '30'){ 
      status = 'closed'; 
     }else if (hour=='16' && mins > '30'){ 
      status = 'closed'; 
     }else{ 
      status = 'open'; 
     } 
    //Weekend hours 8AM to 2PM  
    }else if (dayOfWeek !== 1 && dayOfWeek !== 2 && dayOfWeek !== 3 && dayOfWeek !== 4 && dayOfWeek !== 5 && hour >= 8 && hour <= 14){ 
     if (hour=='8' && mins < '30'){ 
      status = 'closed'; 
     }else if (hour=='14' && mins > '30'){ 
      status = 'closed'; 
     }else{ 
      status = 'open'; 
     } 
    }else{ 
     status = 'closed'; 
    } 

    if (status=='open') { 
     $('.hours').show(); 

    }else{ 
     $('.hours').hide(); 

    }; 

});

来源

2017-05-08 lnedeau

考虑到你要完成我会做以下内容：

首先创建一个功能，让你可以更容易地测试你的代码。
由于您正在使用有限的工作日数（7），因此建议您使用switch而不是if来检查您的日期的这一部分，建议您使用。
如您所说，如果您的日期在周末8:00〜14:00 或周一至周五8:00〜16:00之间需要测试，则代码将正确运行。这是因为小时数范围更容易测试。

(function($){ 
 
    $(document).ready(function(){  
 
    function setupHours(myDate){ 
 
     var dayOfWeek = myDate.getDay(); 
 
     var hour = myDate.getHours(); 
 
     var mins = myDate.getMinutes(); 
 
     var secs = myDate.getSeconds(); 
 
     var status = 'open'; 
 
    
 
     switch(dayOfWeek){ 
 
    \t  case 0: //sunday 
 
      case 6: //Saturday 
 
       console.log("Weekend"); 
 
       //from 8:00:00 to 13:59:59 
 
       status = (hour >= 8 && mins >= 0 && secs >= 0) && (hour <= 13 && mins <=59 && secs <= 59) ? 'open':'closed'  
 
       break; 
 
      case 1: //Monday 
 
      case 2://tusday 
 
      case 3://wednesday 
 
      case 4://thursday 
 
      case 5: //friday 
 
       console.log('weekday'); 
 
       //from 8:00:00 to 15:59:59 
 
       status = (hour >= 8 && mins >= 0 & secs >= 0) && (hour <= 15 && mins <= 59 && secs <= 59) ? 'open':'closed' 
 
       break; 
 
     } 
 
     
 
     //TODO: delete, test case console log 
 
     console.log("Status for: " +myDate+ " is " + status.toUpperCase()); 
 
    
 
     $('.hours').text(status); 
 
    
 
    } 
 
    
 
    //TODO: delete, for test cases only 
 
    
 
    setupHours(new Date(2017, 4, 8, 7, 59, 00, 00)); // monday 7:59 
 
    setupHours(new Date(2017, 4, 8, 8, 00, 00, 00)); // monday 8:00 
 
    setupHours(new Date(2017, 4, 8, 15, 59, 59, 00)); // monday 15:59 
 
    setupHours(new Date(2017, 4, 8, 16, 00, 00, 00)); // monday 16:00 
 
    setupHours(new Date(2017, 4, 8, 16, 30, 00, 00)); // monday 16:30 
 
    
 
    setupHours(new Date(2017, 4, 13, 7, 59, 00, 00)); // saturday 7:59 
 
    setupHours(new Date(2017, 4, 13, 8, 00, 00, 00)); // saturday 8:00 
 
    setupHours(new Date(2017, 4, 13, 13, 59, 59, 00)); // saturday 15:59 
 
    setupHours(new Date(2017, 4, 13, 14, 00, 00, 00)); // saturday 16:00 
 
    setupHours(new Date(2017, 4, 13, 14, 30, 00, 00)); // saturday 16:30 
 
    
 
    //TODO: Non test code, keep as is 
 
    setupHours(new Date()); 
 
\t \t 
 
    
 
    }); 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="date-filtering" class="hours"></div>

编辑：

对于一个更通用的，可能是更好的解决方案，你可以尝试以下。而不是比较小时和分钟的实际数字。它会创建两个新的日期，作为您的actualDate的比较器。这两个日期将代表您的lowerDate和upperDate。

函数testRange()根据范围的测试返回true或false。

也如前面所说我也建议使用功能隔离的功能位，如在testRange()完成，setupDate()

(function($){ 
 
    $(document).ready(function(){  
 
    function setupHours(myDate){ 
 
     var dayOfWeek = myDate.getDay(); 
 
     var status = 'open';   
 
      
 
     switch(dayOfWeek){ 
 
    \t  case 0: //sunday 
 
      case 6: //Saturday 
 
       console.log("Weekend"); 
 
       //from 8:00:00 to 13:59:59 
 
       status = testRange(8,30, 14, 30, myDate) ? 'open':'closed' //Test your range  
 
       break; 
 
      case 1: //Monday 
 
      case 2://tusday 
 
      case 3://wednesday 
 
      case 4://thursday 
 
      case 5: //friday 
 
       console.log('weekday'); 
 
       //from 8:00:00 to 15:59:59 
 
       status = testRange(8,30, 16, 30, myDate) ? 'open':'closed' //Test your range 
 
       break; 
 
     } 
 
     
 
     //TODO: delete, test case console log 
 
     console.log("Status for: " +myDate+ " is " + status.toUpperCase()); 
 
    
 
     $('.hours').text(status); 
 
    
 
    } 
 
    
 
    function testRange(lHour,lMin, hHour ,hMin, actualDate){ 
 
\t \t \t var lowDate = new Date(actualDate); //Create a new date based on the one you need to test 
 
     lowDate.setHours(lHour); //set hour to your loweHour 
 
     lowDate.setMinutes(lMin); //Set min to your lowerMin 
 
     lowDate.setSeconds(0); //Set seconds to 0 
 
     lowDate.setMilliseconds(0); //Set mill to 0 
 
     
 
     var highDate = new Date(actualDate); //Create a new date based on the one you need to test 
 
     highDate.setHours(hHour); //set hour to your higher our 
 
     highDate.setMinutes(hMin); //set hour to you higher mir 
 
     highDate.setSeconds(0);//Set seconds to 0 
 
     highDate.setMilliseconds(0);//Set mill to 0 
 
     
 
     return actualDate >= lowDate && actualDate <= highDate //Test if the actual date is in range. 
 
     
 
    } 
 
    
 
    //TODO: delete, for test cases only 
 
    
 
    setupHours(new Date(2017, 4, 8, 7, 59, 00, 00)); // monday 7:59 
 
    setupHours(new Date(2017, 4, 8, 8, 00, 00, 00)); // monday 8:00 
 
    setupHours(new Date(2017, 4, 8, 15, 59, 59, 00)); // monday 15:59 
 
    setupHours(new Date(2017, 4, 8, 16, 00, 00, 00)); // monday 16:00 
 
    setupHours(new Date(2017, 4, 8, 16, 30, 00, 00)); // monday 16:30 
 
    
 
    setupHours(new Date(2017, 4, 13, 7, 59, 00, 00)); // saturday 7:59 
 
    setupHours(new Date(2017, 4, 13, 8, 00, 00, 00)); // saturday 8:00 
 
    setupHours(new Date(2017, 4, 13, 13, 59, 59, 00)); // saturday 15:59 
 
    setupHours(new Date(2017, 4, 13, 14, 00, 00, 00)); // saturday 16:00 
 
    setupHours(new Date(2017, 4, 13, 14, 30, 00, 00)); // saturday 16:30 
 
    
 
    //TODO: Non test code, keep as is 
 
    setupHours(new Date()); 
 
\t \t 
 
    
 
    }); 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="date-filtering" class="hours"></div>

来源

2017-05-08 15:36:38

这真是棒极了！我还有一个问题。我正在尝试将图像添加到“打开”旁边的字符串中。我只需要在营业时间内展示。 – lnedeau

然后代替$（'。hours'）。text（status）;'尝试使用'$（'。hours'）。toggle（status）;'请参考http://api.jquery.com/toggle /有关如何使用jQuery切换功能的更多信息。然后，只需将您的图片添加到'

' –

基于日期和时间（周和周末）的显示分区

回答

相关问题