基於日期和時間（周和週末）的顯示分區

我正在根據一天中的時間顯示或隱藏分區（班級=小時）的項目。在以前的問題中，我已經能夠在你的集體天才的幫助下工作。然而！我需要在週末和週日有不同的時間（週末從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切換功能的更多信息。然後，只需將您的圖片添加到'

' –

基於日期和時間（周和週末）的顯示分區

回答

相關問題