这是我从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];
答案 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
}
答案 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];
,我都会突出显示。