如何编码突出显示的营业时间?

时间:2016-02-01 22:48:14

标签: javascript jquery html hour

这是我从another codepen code分叉并修改为仅显示星期一 - 星期五,星期六和星期日的代码。但是,我无法弄清楚如何修改Javascript代码以适应我编辑的新代码。帮助

您可以查看我创建的修改后的codepen代码。 http://codepen.io/kikibres/pen/eJjdoE

HTML

<section class="openinghours">
    <div class="openinghourscontent section">

        <table class="opening-hours-table">
            <tr id="Monday" itemprop="openingHours" title="Open Monday at 9am to 6pm">
                <td>Monday-Friday</td>
                <td class="opens">09:00</td>
                <td>-</td>
                <td class="closes">18:00</td>
            </tr>

            <tr id="Saturday" itemprop="openingHours" title="Open Saturday at 10am to 6pm">
                <td>Saturday</td>
                <td class="opens">10:00</td>
                <td>-</td>
                <td class="closes">18:00</td>
            </tr>
            <tr id="Sunday" itemprop="openingHours" title="Open Sunday at 11am to 4pm">
                <td>Sunday</td>
                <td class="opens">11:00</td>
                <td>-</td>
                <td class="closes">16:00</td>
            </tr>
        </table>

    </div>
</section>

的Javascript

var currentDate = new Date();
var weekday = [];
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var currentDay = weekday[currentDate.getDay()];

var currentTimeHours = currentDate.getHours();
currentTimeHours = currentTimeHours < 10 ? "0" + currentTimeHours : currentTimeHours;
var currentTimeMinutes = currentDate.getMinutes();
var timeNow = currentTimeHours + "" + currentTimeMinutes;

var currentDayID = "#" + currentDay; //gets todays weekday and turns it into id
$(currentDayID).toggleClass("today"); //this works at hightlighting today

var openTimeSplit = $(currentDayID).children('.opens').text().split(":");

var openTimeHours = openTimeSplit[0];
openTimeHours = openTimeHours < 10 ? "0" + openTimeHours : openTimeHours;

var openTimeMinutes = openTimeSplit[1];
var openTimex = openTimeSplit[0] + openTimeSplit[1];

var closeTimeSplit = $(currentDayID).children('.closes').text().split(":");

var closeTimeHours = closeTimeSplit[0];
closeTimeHours = closeTimeHours < 10 ? "0" + closeTimeHours : closeTimeHours;

var closeTimeMinutes = closeTimeSplit[1];
var closeTimex = closeTimeSplit[0] + closeTimeSplit[1];

2 个答案:

答案 0 :(得分:0)

我已更改代码以突出显示当前是否为工作日。 您已从原始codepen中删除了一些功能,例如显示它们当前是否处于打开状态,因此我没有更新相应的代码。

我改变了行的ID#34;星期一&#34;到&#34;工作日&#34;。

<强> JS:

transform.scale

更新了codepen

- 编辑 -

再看一遍,我发现这个更清楚。

if (currentDate.getDay() != 0 && currentDate.getDay() != 6) { // if not Sunday or Sunday it must be a weekday
    $("#Weekday").toggleClass("today");
} else {
    $(currentDayID).toggleClass("today"); //this works at hightlighting today
}

JSFiddle

答案 1 :(得分:0)

感谢Jaydo给了我有用的提示,我能够重新编辑我的代码并且它有效。

这里是code http://codepen.io/kikibres/pen/eJjdoE

HTML

<section class="openinghours">
    <div class="openinghourscontent section">

        <table class="opening-hours-table">
            <tr id="Weekday" itemprop="openingHours" title="Open Monday-Friday at 8am to 9pm">
                <td>Monday-Friday</td>
                <td class="opens">8:00am</td>
                <td>-</td>
                <td class="closes">9:00pm</td>
            </tr>

            <tr id="Saturday" itemprop="openingHours" title="Open Saturday at 8am to 5pm">
                <td>Saturday</td>
                <td class="opens">8:00am</td>
                <td>-</td>
                <td class="closes">5:00pm</td>
            </tr>
            <tr id="Sunday" itemprop="openingHours" title="Open Sunday at 9am to 6pm">
                <td>Sunday</td>
                <td class="opens">9:00am</td>
                <td>-</td>
                <td class="closes">6:00pm</td>
            </tr>
        </table>

    </div>
</section>

我改变了#34;星期一&#34;到&#34;工作日&#34;

在Javascript中,我编辑了工作日

var currentDate = new Date();
var weekday = [];
weekday[0] = "Sunday";
weekday[1] = "Weekday";
weekday[2] = "Weekday";
weekday[3] = "Weekday";
weekday[4] = "Weekday";
weekday[5] = "Weekday";
weekday[6] = "Saturday";

因此,无论我输入哪个号码,例如var currentDay = weekday[6];,我都会突出显示。