时间戳

首页 > 解决方案 > 我想制定 2 班营业时间的时间表

javascript - 我想制定 2 班营业时间的时间表

问题描述

我是 JavaScript 新手，谁能帮帮我？由于某种原因，它不起作用。它要么不会打开，要么不会关闭。我想创建一个时间表，表明我们在早上开放，在午休期间关闭，然后在下午再次开放，并在工作日结束时再次关闭。我还要指出：我们在 x 分钟内打开，在 x 分钟内关闭。

你也可以去https://codepen.io/Wolf91/pen/KKNjzGg 在那里编辑代码。这就是我所拥有的：

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

if (timeNow <= openTimex && timeNow >= closeTimex) {
    $(".openorclosed").toggleClass("open");
} else {
    $(".openorclosed").toggleClass("closed");
} 

if (timeNow <= openTimex && timeNow >= closeTimex) {
    $(".openorclosed").toggleClass("open");
} else {
    $(".openorclosed").toggleClass("closed");
} 

/* reopens in the afternoon */
var openReTimeSplit = $(currentDayID).children('.reopens').text().split(":");

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

var openTimeMinutes = openReTimeSplit[1];
var openTimey = openReTimeSplit[0] + openReTimeSplit[1];

var closeReTimeSplit = $(currentDayID).children('.recloses').text().split(":");

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

var closeTimeMinutes = closeTimeSplit[1];
var closeTimey = closeReTimeSplit[0] + closeReTimeSplit[1];

if (timeNow >= openTimey && timeNow <= closeTimey) {
    $(".openorclosed").toggleClass("open");
} else {
    $(".openorclosed").toggleClass("closed");
} 
.openinghours {
    overflow: hidden;
    display: inline-block;
    padding-bottom: 20px;
}

.today {
    background-color: #489E92;
}

.opening-hours-table tr td:first-child {
    font-weight: 600;
}

td {
    width: 1%;
}

#open-status {
    display: block;
}

.openorclosed:after {
    content:" open during these hours:";
}

.open {
    color:green;
    font-weight: bold;
}

.open:after {
    content: " open.";
    color: #6C0;
}

.closed:after {
    content: " closed.";
    color: red;
}

/* Layout */
@import url('https://fonts.googleapis.com/css?family=Bad+Script|Open+Sans');

body {
  background-color: #333333;
  color: #E8DDB5;
  font-family: 'Open Sans', sans-serif;
}

h1 {
  font-family: 'Bad Script', cursive;
}

.openinghourscontent {
  display: block;
  width: 500px;
  margin: 0 auto;
  padding: 50px;
}
<div class="container">
  <section class="openinghours">
    <div class="openinghourscontent section">
        <div class="header">
             <h1>Opening hours</h1>
                        <span id="open-status"><p class="openorclosed">We are currently</p></span>
        </div>
        <table class="opening-hours-table">
            <tr id="Monday" itemprop="openingHours" title="Open Monday at 9am to 6pm">
                <td>Monday</td>
<td class="opens">09:00</td>
                                    
                                    <td class="closes">12:00</td>
                                    <td> </td>
                                    <td class="reopens">14:00</td>
                                    
                                    <td class="recloses">18:00</td>
            </tr>
            <tr id="Tuesday" itemprop="openingHours" title="Open Tuesday at 9am to 6pm">
                <td>Tuesday</td>
        <td class="opens">09:00</td>
                                    <td class="closes">12:00</td>
                                    <td> </td>
                                    <td class="reopens">14:00</td>
                                    
                                    <td class="recloses">18:00</td>
            </tr>
            <tr id="Wednesday" itemprop="openingHours" title="Open Wednesday at 9am to 6pm">
                <td>Wednesday</td>
                <td class="opens">09:00</td>
                                   
                                    <td class="closes">12:00</td>
                                    <td> </td>
                                    <td class="reopens"></td>
                                   
                                    <td class="recloses"></td>
            </tr>
            <tr id="Thursday" itemprop="openingHours" title="Open Thursday at 9am to 8pm">
                <td>Thursday</td>
                <td class="opens">09:00</td>
                                    
                                    <td class="closes">12:00</td>
                                    <td> </td>
                                    <td class="reopens">14:00</td>
                                    
                                    <td class="recloses">18:00</td>
            </tr>
            <tr id="Friday" itemprop="openingHours" title="Open Friday at 9am to 6pm">
                <td>Friday</td>
                <td class="opens">09:00</td>
                                  
                                    <td class="closes">12:00</td>
                                    <td> </td>
                                    <td class="reopens">14:00</td>
                                 
                                    <td class="recloses">18:00</td>
            </tr>
            <tr id="Saturday" itemprop="openingHours" title="Open Saturday at 10am to 6pm">
                <td>Saturday</td>
                <td class="opens">09:00</td>
                                   
                                    <td class="closes">12:00</td>
                                    <td> </td>
                                    <td class="opens"></td>
                                    
                                    <td class="closes"></td>
            </tr>
            <tr id="Sunday" itemprop="openingHours" title="Open Sunday at 11am to 4pm">
                <td>Sunday</td>
                <td class="opens"></td>
                
                <td class="closes"></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
        </table>
    </div>
</section>
</div>

标签： javascripthtmlcss

解决方案

第一个问题是重复

if (timeNow <= openTimex && timeNow >= closeTimex) {
    $(".openorclosed").toggleClass("open");
} else {
    $(".openorclosed").toggleClass("closed");
}

早上查看营业时间时。执行两次会反转第一次执行的效果：open或close在类名列表中的存在不会改变。

第二个问题是下午开放时间执行了类似的代码（没有重复）：

if (timeNow >= openTimey && timeNow <= closeTimey) {
    $(".openorclosed").toggleClass("open");
} else {
    $(".openorclosed").toggleClass("closed");
}

这会根据下午的开放时间设置“开放”或“关闭”，覆盖为早上开放设置的“开放”状态。

要解决这两个问题，请尝试删除在两个位置切换类的现有代码，并为“当前打开”计算单个布尔值。然后设置打开或关闭状态：

// caculate x and y times...

var bOpen = (timeNow >= openTimex && timeNow < closeTimex)
         || (timeNow >= openTimey && timeNow < closeTimey);
$(".openorclosed").attr("class",
      bOpen ? "openorclosed open" : "openorclosed closed"
);

这可以方便地设置两个必需的类，以避免必须弄清楚应该关闭和打开哪些类。

可能还有其他问题可以根据需要解决：在测试时，我将分钟值填充为两个字符宽，以避免考虑任意时间字符串之间的字符串比较结果。timeNow通过在字符串中放置一个冒号字符并直接从表中使用打开和关闭时间（无需在所有地方拆分内容），大大简化了代码。到目前为止，还没有重置当前日期突出显示的代码，并且打开/关闭状态是使用用于查看页面的设备的时区计算的。

更新后的代码段，带有测试代码和一些简化如下：

"use strict";
// callable test code:
const codeTest = testDate=> {

  var currentDate = testDate; // for testing
  var weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

  // current day of week
  var currentDay = weekday[currentDate.getDay()];
  var currentDayID = "#" + currentDay; //gets todays weekday and turns it into id
  $(currentDayID).toggleClass("today"); //this works at highlighting today
 
  // current time
  var currentTimeHours = currentDate.getHours();
  currentTimeHours = currentTimeHours < 10 ? "0" + currentTimeHours : currentTimeHours;
  var currentTimeMinutes = currentDate.getMinutes();
  currentTimeMinutes = currentTimeMinutes < 10 ? "0" + currentTimeMinutes:currentTimeMinutes;
  var timeNow = currentTimeHours + ":" + currentTimeMinutes;  //! with colon

  console.log("testing %s times for time of day set to ", currentDay, timeNow)
  
  // open times
  var openTimex = $(currentDayID).children('.opens').text();
  var closeTimex = $(currentDayID).children('.closes').text();
  console.log("openTimex %s, closeTimey %s", openTimex, closeTimex);
  
  /* reopen times */
  var openTimey = $(currentDayID).children('.reopens').text();
  var closeTimey = $(currentDayID).children('.recloses').text();
  
  // set currently open status
  var bOpen = (timeNow >= openTimex && timeNow < closeTimex)
               || (timeNow >= openTimey && timeNow < closeTimey);
  $(".openorclosed").attr("class",
      bOpen ? "openorclosed open" : "openorclosed closed"
  );
};

// click handler to test code:
const test = event => {
   console.clear();
   codeTest(new Date(
     document.getElementById("date").value + 'T' 
     + document.getElementById("time").value
   ))
};

   
.openinghours {
    overflow: hidden;
    display: inline-block;
    padding-bottom: 20px;
}

.today {
    background-color: #489E92;
}

.opening-hours-table tr td:first-child {
    font-weight: 600;
}

td {
    width: 1%;
}

#open-status {
    display: block;
}

.openorclosed:after {
    content:" open during these hours:";
}

.open {
    color:green;
    font-weight: bold;
}

.open:after {
    content: " open.";
    color: #6C0;
}

.closed:after {
    content: " closed.";
    color: red;
}

body {
  background-color: #333333;
  color: #E8DDB5;
  font-family: 'Open Sans', sans-serif;
}

h1 {
  font-family: 'Bad Script', cursive;
}

.openinghourscontent {
  display: block;
  width: 500px;
  margin: 0 auto;
  padding: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<label>Date <input id="date" type="date" value="2021-03-22"></label> and 
<label>time <input id="time" type="time" value="08:00"></label>
<button type="button" onclick="test()">Test</button>
<hr> <!-- end of test button HTML -->

<div class="container">
  <section class="openinghours">
    <div class="openinghourscontent section">
        <div class="header">
             <h1>Opening hours</h1>
                        <span id="open-status"><p class="openorclosed">We are currently</p></span>
        </div>
        <table class="opening-hours-table">
            <tr id="Monday" itemprop="openingHours" title="Open Monday at 9am to 6pm">
                <td>Monday</td>
<td class="opens">09:00</td>
                                    
                                    <td class="closes">12:00</td>
                                    <td> </td>
                                    <td class="reopens">14:00</td>
                                    
                                    <td class="recloses">18:00</td>
            </tr>
            <tr id="Tuesday" itemprop="openingHours" title="Open Tuesday at 9am to 6pm">
                <td>Tuesday</td>
        <td class="opens">09:00</td>
                                    <td class="closes">12:00</td>
                                    <td> </td>
                                    <td class="reopens">14:00</td>
                                    
                                    <td class="recloses">18:00</td>
            </tr>
            <tr id="Wednesday" itemprop="openingHours" title="Open Wednesday at 9am to 6pm">
                <td>Wednesday</td>
                <td class="opens">09:00</td>
                                   
                                    <td class="closes">12:00</td>
                                    <td> </td>
                                    <td class="reopens"></td>
                                   
                                    <td class="recloses"></td>
            </tr>
            <tr id="Thursday" itemprop="openingHours" title="Open Thursday at 9am to 8pm">
                <td>Thursday</td>
                <td class="opens">09:00</td>
                                    
                                    <td class="closes">12:00</td>
                                    <td> </td>
                                    <td class="reopens">14:00</td>
                                    
                                    <td class="recloses">18:00</td>
            </tr>
            <tr id="Friday" itemprop="openingHours" title="Open Friday at 9am to 6pm">
                <td>Friday</td>
                <td class="opens">09:00</td>
                                  
                                    <td class="closes">12:00</td>
                                    <td> </td>
                                    <td class="reopens">14:00</td>
                                 
                                    <td class="recloses">18:00</td>
            </tr>
            <tr id="Saturday" itemprop="openingHours" title="Open Saturday at 10am to 6pm">
                <td>Saturday</td>
                <td class="opens">09:00</td>
                                   
                                    <td class="closes">12:00</td>
                                    <td> </td>
                                    <td class="opens"></td>
                                    
                                    <td class="closes"></td>
            </tr>
            <tr id="Sunday" itemprop="openingHours" title="Open Sunday at 11am to 4pm">
                <td>Sunday</td>
                <td class="opens"></td>
                
                <td class="closes"></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
        </table>
    </div>
</section>
</div>

我还没有考虑使用间隔计时器更新“打开/关闭”状态。这是对已发布代码的相当大的升级，我建议考虑重写页面以从 JavaScript 中保存的数据（可能从文件中加载）生成营业时间表，.json而不是将数据放在 HTML 中。

推荐阅读