如果用户准时输入声明

如何解决如果用户准时输入声明

我试图创建一个if语句，用户必须在其中选择7am到16pm之间的时间。我已经在Stack，WESchools，MDN上进行搜索，并以多种方式编写了if语句，但仍然无法使其正常工作。

无论输入的时间和代码是否运行，都会弹出警报，或者无论用户输入的时间如何，代码都会运行。

代码如下：

<div class="content-container">
  <div id="table-section" class="table-section">
  <div>
    <button class="confirm">Confirm</button>
    <button class="reset" type="reset">Reset</button>
 <table id="table_id" class="table">
  <thead>
   <tr>
    <th id="th-reg">Registration</th>
    <th id="th-name">Name</th>
    <th id="th-cmr">Current Miles Range</th>
    <th id="th-cni">Miles needed for next trip</th>
    <th id="th-tl">Hours to charge for next trip</th>
    <th id="tpoc">Time Leaving</th>
   </tr>
</thead>
  <tbody>
   <tr>
    <td><span class="answer"></span><input class="reg question" id="car-1-reg" type="text" value="" placeholder="Enter Registration"></input></td>
    <td id="car-1-name" class="name value-reset"></td>
    <td><span id="car-1-cmra" class="answer" type="number"></span><input id="car-1-cmr" class="cmr question" type="text" value="" placeholder="Enter Miles Left"></input></td>
    <td><span id="car-1-mtnc" class="answer" type="number"></span><input id="car-1-mtnc" class="mtnc question" type="text" value="" placeholder="Enter Miles needed"></input></td>
    <td id="car-1-charge-needed" class="charge"></td>
    <td id="car-1-tl" class="tl"><span class="answer time-input" type="text"></span><input class="time" type="time" min="07:00:00" max="16:00:00" required></input></td>
  </tr>
 </tbody>
</table>
   <button id="generate-time-table" class="generate">Generate Schedule</button>
 </div>
</div>

$(".confirm").click(function() {
  var _times = document.getElementsByClassName("time");
  if ((_times > 7) && (_times < 16)) {  
    $("#table_id tbody tr").each(function() {
      if ($(this).find(".reg").val() == "") {
      $(this).find(".name").text("Please enter valid Registration");
  }
  var cmra = $(this).find(".cmr").val();
  var mtnc = $(this).find(".mtnc").val();
  if ((cmra != null && cmra != "") && (mtnc != null && mtnc != "")) {
    var miles = Math.ceil((parseInt(mtnc - cmra)) / 44);
    $(this).find(".charge").text(miles);
  } else if (cmra == null || cmra == "") {
    $(this).find(".charge").text("Please enter the current miles left");
  } else if (mtnc == null || mtnc == "") {
    $(this).find(".charge").text("Please enter the mtnc  left");
  }
})
} else {
  alert("Please enter a time between 7:00am and 16:00pm");
}
});

这是小提琴：https://jsfiddle.net/Coxy/bv5jct7n/20/

任何指针都将不胜感激，无论用哪种方式编写，我都无法弄清楚出了什么问题。

解决方法

您可以简单地从时间输入中获取hh部分，然后将其与hours进行比较，即：如果hh是>= 7和<= 16，则取决于显示错误消息。

演示代码 ：

$("input[type='time']").change(function() {
  var time = $(this).val().split(":")[0]; //get hrs
  console.log($(this).val().split(":")[0]);
  //check hrs if grater then or lss then or not
  if ((time >= 7) && (time <= 16)) {
    //show value in span
    $(this).closest('td').find("span").show().text($(this).val());
    $(this).hide(); //hide that input

  } else {
    //show error 
    $(this).closest('td').find("span").show().text("please enter time below 16:00 and greater the 07:00")

  }

});

$(".reset").click(function() {
  $(".answer").html("");
  $("input").show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="content-container">

  <div id="table-section" class="table-section">

    <div>
      <button class="confirm">Confirm</button>
      <button class="reset" type="reset">Reset</button>
      <table id="table_id" class="table">
        <thead>
          <tr>
            <th id="th-reg">Registration</th>
            <th id="th-name">Name</th>
            <th id="th-cmr">Current Miles Range</th>
            <th id="th-cni">Miles needed for next trip</th>
            <th id="th-tl">Hours to charge for next trip</th>
            <th id="tpoc">Time Leaving</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span class="answer"></span><input class="reg question" id="car-1-reg" type="text" value="" placeholder="Enter Registration"></input>
            </td>
            <td id="car-1-name" class="name value-reset"></td>
            <td><span id="car-1-cmra" class="answer" type="number"></span><input id="car-1-cmr" class="cmr question" type="text" value="" placeholder="Enter Miles Left">
            </td>
            <td><span id="car-1-mtnc" class="answer" type="number"></span><input id="car-1-mtnc" class="mtnc question" type="text" value="" placeholder="Enter Miles needed">
            </td>
            <td id="car-1-charge-needed" class="charge"></td>
            <td id="car-1-tl" class="tl"><span class="answer time-input" type="text"></span><input class="time" type="time" min="07:00:00" max="16:00:00" required>
            </td>

          </tr>

        </tbody>

      </table>