javascript - 如何使用javascript隐藏过去的时间？

Question

我有一个名为 Today 的按钮，当我点击它时，不应显示过去的时间。

我怎样才能做到这一点？

我的代码：

$('.today').click(function() {
  $('.custom_time li').each(function() {
    $(this).hide();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="today">today</button>

<div class="custom_time">
  <ul>
    <li>
      <span class="time"><span class="timeNumeric">10:00</span> <small>am</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">11:00</span> <small>am</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">12:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">01:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">02:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">03:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">04:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">05:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">06:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">07:00</span> <small>pm</small></span>
    </li>
  </ul>
</div>

标签： javascriptjqueryhtml

Answer 1

您需要获取当前时间并将其与每个时间进行比较timeNumeric，您还需要检查“pm/am”期间的时间，例如：

$('.today').click(function(){
  var hour, period;
  var current_hour = new Date().getHours();

  $('.custom_time li').each(function() {
    period = $("small", this).text() === "pm" ? 12 : 0;
    hour = parseInt($(".timeNumeric", this).text().split(':')[0]) + period;

    if (hour <= current_hour || hour === 24) {
      $(this).hide();
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="today">today</button>

<div class="custom_time">
  <ul>
    <li>
      <span class="time"><span class="timeNumeric">10:00</span> <small>am</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">11:00</span> <small>am</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">12:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">01:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">02:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">03:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">04:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">05:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">06:00</span> <small>pm</small></span>
    </li>
    <li>
      <span class="time"><span class="timeNumeric">07:00</span> <small>pm</small></span>
    </li>
  </ul>
</div>