Bir html sınıfı ile zaman kayıtlarına göre Açık/Kapalı nasıl gösterilir

Question

Javascript kullanarak belirli bir tarihte bir şirketin saatine göre Açık veya Kapalı göstermeye çalışıyorum. Müşterilerin işlerini listeleyebilecekleri bir WordPress listesi oluşturun. Haftanın her günü iş saatlerini belirleme seçeneğine sahiptirler. Bir yayında saklanan verileri kullanabilmek ve ardından işletmenin açık mı kapalı mı olduğunu belirleyip bunu görüntüleyebilmek istiyorum. İşte

var bugüne kadar kodudur:

<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> 

Bu sadece bir gün, ama fikir almalısınız. Böyle bir şey bulmak için saatlerce baktım. Tek bulabildiğim, Javascript'te önceden tanımlanmış belirli saatlerle kodlamak. Açık veya kapalı bir sınıf oluşturmak için başlangıç ​​ve bitiş derslerini kullanabilmek istiyorum. Mümkün mü? Ben öyle düşünürdüm. Sadece doğru şekilde yapamıyorum.

Burada pratik oldum ama bir şey anlamaya görünüyor olamaz

: http://codepen.io/tetonhiker/pen/KzxRzg

Teşekkür!

Answer 1

Ben kodunuzu date.js küçük, yapım kullanımı değiştirdik: İçine bakmadım

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>

yeterince yüzden bilmiyorum Saat dilimi ile ilgili nasıl çalışır. Bunun için hesapladığım şeyi ayarlamanız gerekebilir.

Ayrıca: jQuery tarafından gizlenmiş olanlardan önce hem açık hem de kapalı olarak gösterilen kısa flaştan kaçınmak için bir CSS kuralı ekledi.