用户按时输入的 if 语句

Question

我正在尝试创建一个 if 语句，其中用户必须 select 上午 7 点到下午 16 点之间的某个时间。我在 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");
}
});

这是fiddle：https://jsfiddle.net/Coxy/bv5jct7n/20/

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

Answer 1

您可以简单地从时间输入中获取 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>

用户按时输入的 if 语句

If statement for user input on time

time

jquery

if-statement

user-input