如何在星期天隱藏div（javascript上的開放時間）

Question

基於此代碼：http://codepen.io/anon/pen/VaGdBK 我嘗試顯示商店的營業時間。任何人都可以幫助我使用什麼代碼，以便系統在週日將其狀態更改爲關閉時識別出來？週六和週三的工作時間爲：9：00-16：00。

var da = new Date(); 
 
document.getElementById("display").innerHTML = da.toDateString(); 
 

 
    var d = new Date(); 
 
    var n = d.getDay(); 
 

 

 

 
//gets the current time. 
 
//var d = new Date(); 
 
var x = document.getElementsByClassName("start")[0].innerText; 
 
var z = document.getElementsByClassName("end")[0].innerText; 
 
//var o = parseInt(x,10); 
 
//var c = parseInt(z,10); 
 

 
var startTime = Date.parseExact(x, "h:mm tt"); 
 
var endTime = Date.parseExact(z, "h:mm tt"); 
 

 
if (da.between(startTime, endTime)){ 
 
    $(".open").show(); 
 
    $(".closed").hide(); 
 
} 
 
else if (d.getDay = 0){ 
 
\t $(".closed").show(); 
 
    $(".open").hide(); 
 
} 
 
else { 
 
    $(".closed").show(); 
 
    $(".open").hide(); 
 
}

body{ 
 
\t padding:30%; 
 
\t background:pink; 
 
\t color: black; 
 
} 
 
.open, .closed { 
 
    display: none; 
 
}

<span style="display:none;"><span class="day"> Monday</span> 
 
<span class="start">8:30 am</span> - 
 
<span class="end">5:30 pm</span> 
 
<br> 
 
<span id="display"></span> 
 
</span> 
 
<div class="open">Shop is open</div> 
 
<div class="closed">Shop is closed</div>

<script> 
 
var da = new Date(); 
 
document.getElementById("display").innerHTML = da.toDateString(); 
 

 

 

 

 
//gets the current time. 
 
//var d = new Date(); 
 
var x = document.getElementsByClassName("start")[0].innerText; 
 
var z = document.getElementsByClassName("end")[0].innerText; 
 
//var o = parseInt(x,10); 
 
//var c = parseInt(z,10); 
 

 
var startTime = Date.parseExact(x, "h:mm tt"); 
 
var endTime = Date.parseExact(z, "h:mm tt"); 
 

 
if (da.between(startTime, endTime)){ 
 
    $(".open").show(); 
 
    $(".closed").hide(); 
 
} 
 
else { 
 
    $(".closed").show(); 
 
    $(".open").hide(); 
 
} 
 
// how can I show the closed class on Sunday? 
 
// How can I show the open class from 9:00 am to 19:00 pm? 
 

 
</script>

Answer 1

首先，在codepen比如你從工作有錯誤。如果按下JS設置按鈕，您會看到Jquery的源代碼有問題：您需要在其前面添加http：。

我在您對代碼所做的更改旁添加了註釋。

da.getDay（）是關鍵。

var da = new Date(Date.now()); 
 
document.getElementById("display").innerHTML = da.toDateString(); 
 

 
var weekStartTime = document.getElementsByClassName("start")[0].innerText; 
 
var weekEndTime = document.getElementsByClassName("end")[0].innerText; 
 
var saturdayStartTime = document.getElementsByClassName("saterdayStart")[0].innerText; 
 
var saturdayEndTime = document.getElementsByClassName("saterdayEnd")[0].innerText; 
 

 
//da.getDay() returns a number sunday = 0, monday = 1,... 
 
if (da.getDay() === 0) { //sunday, shop is closed 
 
    $(".closed").show(); 
 
    $(".open").hide(); 
 
} else { //not sunday, look at opening hours 
 
    var startTime, endTime; 
 
    if (da.getDay() === 6) { //saturday opening hours 
 
    startTime = Date.parseExact(saturdayStartTime, "h:mm tt"); 
 
    endTime = Date.parseExact(saturdayEndTime, "h:mm tt"); 
 
    } else {// workweek openinghours 
 
    startTime = Date.parseExact(weekStartTime, "h:mm tt"); 
 
    endTime = Date.parseExact(weekEndTime, "h:mm tt"); 
 
    } 
 
    //now that we have aquired the correct opening hours, the div's can be set. 
 
    if (da.between(startTime, endTime)) { 
 
    $(".open").show(); 
 
    $(".closed").hide(); 
 
    } else { 
 
    $(".closed").show(); 
 
    $(".open").hide(); 
 
    } 
 
}

Opening Hours:</br> 
 
<span class="day">Monday </span> 
 
<span class="start">8:30 am</span> - 
 
<span class="end">5:30 pm</span> 
 
</br> 
 
<!-- I've added the opening hours for saturday --> 
 
Saturday <span class="saterdayStart">9:00 am</span> 
 
- <span class="saterdayEnd">16:00 pm</span> 
 
</br> 
 
</br> 
 
Current time: <span id="display"></span> 
 
<div class="open">Shop is open</div> 
 
<div class="closed">Shop is closed</div> 
 

 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>

Answer 2

var da = new Date(Date.now()); 
 
document.getElementById("display").innerHTML = da.toDateString(); 
 

 

 

 

 
//gets the current time. 
 
//var d = new Date(); 
 
var x = document.getElementsByClassName("start3")[0].innerText; 
 
var z = document.getElementsByClassName("end3")[0].innerText; 
 
var s = document.getElementsByClassName("sats")[0].innerText; 
 
var e = document.getElementsByClassName("sate")[0].innerText; 
 

 

 
var startTime = Date.parseExact(x, "h:mm tt"); //variables of working days 
 
var endTime = Date.parseExact(z, "h:mm tt"); //variables of working days 
 

 
var satwedstart = Date.parseExact(s, "h:mm tt"); //declare variables of wednesday and saturday 
 
var satwedend = Date.parseExact(e, "h:mm tt"); //declare variables of wednesday and saturday 
 

 
var da = new Date(Date.now()); 
 

 

 
if (da.getDay() === 0) { //sunday, shop is closed 
 
    $(".closed3").show(); 
 
    $(".open3").hide(); 
 
} 
 
else if (da.getDay() === 6 || da.getDay() === 3){ //saturday [6] or wednesday[3] shop has different opening hours 
 
\t 
 
\t if(da.between(satwedstart, satwedend)){ 
 
    $(".open3").show(); 
 
    $(".closed3").hide(); 
 
} 
 
else { 
 
    $(".closed3").show(); 
 
    $(".open3").hide(); 
 
} 
 
} 
 
    
 
else if (da.between(startTime, endTime)){ // working days 
 
    $(".open3").show(); 
 
    $(".closed3").hide(); 
 
} 
 
else { 
 
    $(".closed3").show(); 
 
    $(".open3").hide(); 
 
}

body{ 
 
    background:pink; 
 
    }

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 

 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script> 
 
<span class="day hide">Monday </span> 
 
<span class="start3 hide">09:00 am</span> 
 
<span class="end3 hide">07:00 pm</span> 
 
<span class="sats hide">9:00 am</span> 
 
<span class="sate hide">04:00 pm</span> 
 

 

 
<span id="display" class="hide"></span> 
 
<span style="padding-left:4%;" class="open3 w3-small"><i class="w3-round fa fa-circle-thin w3-green w3-text-green" aria-hidden="true"></i>&nbsp;&nbsp; Shop is open</span> 
 
<span style="padding-left:4%;" class="closed3 w3-small "><i class="w3-round w3-text-red w3-red fa fa-circle-thin" aria-hidden="true"></i>&nbsp;&nbsp;Shop is closed</span>

這裏是解決方案，通知星期三和星期六商店有不同的開放時間