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

时间：2019-04-01 09:29:06

标签： javascript jquery html

我有一个名为今天的按钮，当我单击该按钮时，不应显示过去的时间。

我该怎么做？

我的代码：

$('.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>

4 个答案:

答案 0 :(得分：3)

您需要获取当前时间并将其与每个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>

答案 1 :(得分：1)

尝试过滤器

请注意，我使用this script

将上午/下午转换为24小时 

const pad = (num) => ("0"+num).slice(-2);
const convertTime12to24 = (time12h) => { const [time, modifier] = time12h.split(' '); let [hours, minutes] = time.split(':'); if (hours === '12') hours = '00'; if (modifier.toUpperCase() === 'PM') hours = parseInt(hours, 10) + 12; return `${pad(hours)}:${pad(minutes)}`; }
const padTime = (d) => `${pad(d.getHours())}:${pad(d.getMinutes())}`;

$('.today').on("click",() => {
  const now = padTime(new Date());
  $('#output').text(` Filtering on ${now}`)
  $('.custom_time li').filter((_,elm) => {
    const $t = $(elm).find('.timeNumeric');
    const text = convertTime12to24($t.text()+' '+$t.next().text());
    return text<now;
  }).hide();

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

<button class="today">today</button><span id="output"></span>

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

答案 2 :(得分：1)

您可以这样操作...我认为代码可以进行很多改进，但是，这是一个开始。

$('.today').click(function() {
  $('.custom_time li').each(function() {
    var hour = $(this).find('.timeNumeric').html();
    hour = hour.split(':')[0];
    hour = parseInt(hour);
    var isMorning = $(this).find('small').html() == 'am';
    if (!isMorning && hour != 12) hour += 12;
    var currentDate = new Date();
    if (hour <= currentDate.getHours()) {
        $(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>

答案 3 :(得分：1)

我建议您做的是，只需随机安排一个日期（没有时间部分）。

现在为该日期设置当前日期的minutes，hours和seconds。

现在用您的li中提到的时间创建一个日期（与上面相同的日期部分），并将其与简单的<或>进行比较，您应该可以获得你想要

$('.today').click(function() {
  var d = new Date();
  
  var today = new Date("11/24/1993");
  
  today.setHours(d.getHours());
  today.setMinutes(d.getMinutes());
  today.setSeconds(d.getSeconds());
   
  $('.custom_time li').each(function() {
       var tempDate = new Date("11/24/1993 "+$(this).text());
       
        
       
       if(tempDate < today)
           $(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>

相关问题
最新问题