3
votes

Comment cacher le temps passé en utilisant javascript?

J'ai un bouton avec le nom Aujourd'hui Quand je clique dessus, il ne devrait pas y avoir d'affichage du temps passé.

Comment puis-je faire cela?

Mon code:

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

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

});

javascript jquery html

7 commentaires

On dirait que votre code fait déjà ce que vous voulez. Quel est le problème?

@glhr regarde son code actuel, il n'y a pas de logique à l'intérieur, il vient de tout cacher

quand je clique sur le bouton aujourd'hui, il y a tous les temps cachés, mais je veux simplement cacher le temps passé selon l'heure actuelle.

vous voulez dire cacher seulement fois moins que l'heure actuelle?

@George Bailey Oui

@RohitVerma veuillez ajouter le comportement souhaité dans votre message.

@RohitVerma s'il vous plaît vérifier ma réponse

4 Réponses :

3
votes

Vous devez obtenir l'heure actuelle et la comparer à chaque timeNumeric , vous devez également vérifier les heures de la période "pm / am", comme:

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

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

});

4 commentaires

ne devrait-il pas cacher aussi midi? comme ici il est 14h56?

il y a 12h00 devrait également être masqué car il est inférieur à l'heure actuelle

Ah, j'ai raté le am / pm

Merci @Zakaria Acharki maintenant son fonctionnement très bien exactement ce que vous voulez. Merci

1
votes

Essayez le filtre

Notez que j'ai converti le matin / l'après-midi en 24 heures à l'aide de ce script

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

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();

});

3 commentaires

cachant toujours tout

qu'en est-il de 3,4,5,6 PM?

Je pense que c'est. 12:00 PM est moins de 15:00 Non?

1
votes

Vous pouvez le faire comme ça ... Je pense que ce morceau de code peut être beaucoup amélioré mais bon, c'est un début.

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

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

});

1 commentaires

il y a 12h00 devrait également être masqué car il est inférieur à l'heure actuelle

1
votes

Ce que je vous suggère de faire, c'est de prendre simplement une date aléatoire (sans la partie horaire).

Réglez maintenant les minutes , heures , secondes de la date actuelle pour cette date.

Maintenant, créez une date ( partie de date identique à celle ci-dessus) avec l'heure de celle mentionnée dans votre li et comparez-les avec un simple ou > et vous devriez pouvoir obtenir ce que vous voulez

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

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

});

2 commentaires

Il n'est pas nécessaire de créer une date à chaque fois. Seule la chaîne HH: MM (avec ou sans am / pm) suffit car elle trie correctement

ohk. ne le savais pas. Merci :)