表示方法htmlクラスの時刻レコードに基づいてオープン/クローズ

Question

Javascriptを使用して特定の日付の会社の時間に基づいてオープンまたはクローズを表示しようとしています。私はWordPressでListifyというテーマを使用していますが、顧客はそのビジネスをリストできます。彼らは週の毎日のために彼らの営業時間を入れるオプションがあります。私はスパン内に格納されているそのデータを使用して、ビジネスが開いているか閉じているかを判断し、それを表示できるようにしたいと考えています。ここで

は、私がこれまで持っているコードです：

<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

感謝を！

私は date.jsを利用して、少し自分のコードを変更した

Answer 1

：

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によって非表示にされる前に表示されている開いているものと閉じていないものを簡単に点滅させないようにしました。