0
votes

Comment puis-je modifier le style de l'élément en fonction de l'heure de la journée?

J'essaie de faire une page qui a un calendrier pour la journée qui montre chaque heure de la journée de 9h à 17h. Je veux que chaque heure affiche une couleur différente basée sur l'heure de la journée (gris si l'heure passée, vert si l'heure est à l'avenir, en rouge si c'est l'heure actuelle). J'essaie d'utiliser un moment.js pour m'aider avec ça. Voici ce que je pense, c'est ma meilleure tentative:

p>

        <div class="time-block row nine">
          <p class="hour">9:00 AM </p>
          <textarea class="textarea"></textarea>
          <button class="saveBtn col-1"></button>
        </div>


0 commentaires

3 Réponses :


0
votes

Considérons l'exemple suivant.

p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="time-block row nine">
  <p class="hour">9:15 AM </p>
  <textarea class="textarea"></textarea>
  <button class="saveBtn col-1">BTN</button>
</div>


1 commentaires

Je ne pouvais pas vraiment obtenir cette méthode pour travailler, mais merci. J'ai ajouté ma solution.



2
votes

Je ne sais pas si j'ai eu la "logique de temps" correcte (cochez la déclaration IF), mais cela devrait être ce que vous recherchez. XXX

Notez que cela utilise l'heure du client, donc si vous utilisez ceci sur une page Web dans le monde entier, vous pourriez être ouvert en Europe mais en même temps fermé aux États-Unis. < / p>


1 commentaires

Je ne pouvais pas vraiment obtenir cette méthode pour travailler, mais merci. J'ai ajouté ma solution.



0
votes

Voici comment je l'ai eu pour fonctionner (garder à l'esprit, je devais changer certaines classes / identifiants dans HTML, puis Sélecteurs dans JS):

p>

        <div class="time-block row nine">
          <p class="hour col-1">9:00 AM </p>
          <textarea class="textarea col-10" id="09"></textarea>
          <button class="saveBtn col-1"><img src="https://img.icons8.com/metro/26/000000/save.png"/></button>
        </div>


0 commentaires