如何根據帶有html類的時間記錄顯示打開/關閉

我試圖根據公司使用Javascript的特定日期的公司時間顯示打開或關閉。我在WordPress上使用Listify主題，哪些客戶可以列出他們的業務。他們可以選擇在每週的每個工作日放置工作時間。我希望能夠使用存儲在一個範圍內的數據，然後確定業務是打開還是關閉並顯示。如何根據帶有html類的時間記錄顯示打開/關閉

這裏是我到目前爲止的代碼：

<p class="business-hour" itemprop="openingHours" content="Monday 8am-17pm"> 
    <span class="day">Monday</span> 
    <span class="business-hour-time"> 
     <span class="start">8:30 am</span> – <span class="end">5:30 pm</span> 
    </span> 
</p>

這只是一天，但你應該明白我的意思。我一直在尋找幾個小時來找到這樣的事情。我能找到的所有代碼都是在Javascript中定義的特定小時數。我希望能夠使用類的開始和結束來創建一個打開或關閉。這可能嗎？我會認爲這是。我似乎無法正確地做到這一點。

我一直在這裏練，但似乎無法推測出什麼：http://codepen.io/tetonhiker/pen/KzxRzg

謝謝！

來源

2016-04-26 lostInTheTetons

你打算使用類似[date.js]（http://www.datejs.com/）的圖書館嗎？這將使任務更容易（見[這個問題]（http://stackoverflow.com/questions/9729484/convert-a-time-string-say-1205-pm-into-a-datetime-using-date -parse-in-javascr）） –

是的，我會..我怎麼去使用它呢？ – lostInTheTetons

或者有沒有辦法在PHP中做到這一點？ – lostInTheTetons

我修改您的代碼一點，利用date.js：

http://codepen.io/anon/pen/VaGdBK

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(); 
 
}

.open, .closed { 
 
    display: none; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script> 
 
<span class="day">Monday </span> 
 
<span class="start">8:30 am</span> - 
 
<span class="end">5:30 pm</span> 
 
<br> 
 
<span id="display"></span> 
 
<div class="open">Shop is open</div> 
 
<div class="closed">Shop is closed</div>

我還沒有看過，所以足夠我不知道它如何在時區方面發揮作用。你可能需要調整我發佈的內容來解決這個問題。

另外：增加了一個CSS規則，以避免在jQuery隱藏其中一個被隱藏之前，顯示open和closed的短暫閃爍。

來源

2016-04-26 17:17:33

謝謝！我正在接受它來處理我的主題，除非它在幾個小時內顯示出來。任何方式將其設置爲僅在當週的當天顯示？ – lostInTheTetons

可能在PHP方面做得更好，但您可以執行以下操作：爲顯示當天的每個跨度添加一個「data-day」屬性，並給每個值設置0到6（0表示星期日）。然後，您可以使用本地'getDay（）'並比較該值是否等於'data-day'屬性值以顯示打開或關閉的div，如下所示：if（da.getDay（）=== $（'。（'day'））{//在此處顯示/隱藏} –

對不起，遲到的回覆，感謝您的所有幫助順便說一句。我怎樣才能給每一天的價值0 - 6？ – lostInTheTetons

如何根據帶有html類的時間記錄顯示打開/關閉

回答

相關問題