根据html类的时间记录显示Open / Closed [英] How to show Open/Closed based on time records with an html class

问题描述

我试图根据公司的时间显示开放或关闭，使用Javascript显示特定日期。我正在使用一个主题Listify在WordPress哪些客户可以列出他们的业务。他们可以选择在一周中的每一天投入营业时间。我想要能够使用存储在一个跨度内的数据，然后确定该业务是开放还是关闭并显示。

I'm trying to display Open or Closed based on a company's time for that specific date using Javascript. I'm using a theme Listify on WordPress which customers can list their businesses. They have the option to put in their business hours for each day of the week. I want to be able to use that data which is stored within a span and then determine if the business is open or closed and display that.

这是我有的代码到目前为止：

Here is the code I have so far:

<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中已经定义的特定时间的编码。我想要能够使用类开始和结束创建一个打开或关闭。这可能吗？我会认为的。我似乎不能正确地做到这一点。

This is just for one day, but you should get the idea. I've been looking all over for hours to find something like this. All I can find is coding with the specific hours already defined within Javascript. I want to be able to use the classes start and end to create a the open or closed. Is this possible? I would think it is. I just can't seem to do it correctly.

我一直在这里练习，但似乎没有任何想法： http://codepen.io/tetonhiker/pen/KzxRzg

I've been practicing here but can't seem to figure anything out: http://codepen.io/tetonhiker/pen/KzxRzg

谢谢！

推荐答案

我已经修改了您的代码，使用日期。 js ：

I've modified your code a little, making use of 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>

我没有充分研究它，所以我不知道它是如何工作的时区。您可能需要调整我所发布的内容。

I haven't looked into it sufficiently so I don't know how it works regarding the timezone. You might have to adjust what I've posted to account for that.

另外：添加了一个CSS规则，以避免在一个他们被jQuery隐藏。

Also: added a CSS rule to avoid the brief flash of both open and closed being displayed before one of them is hidden by jQuery.

这篇关于根据html类的时间记录显示Open / Closed的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！