CSS en fonction de l'heure

Bonjour à tous,



je suis à la recherche d'une méthode pour faire avancer le trait rouge toutes les minutes.

Début du trait rouge
style="margin-left:00.0em;"

Fin du trait rouge
style="margin-left:65.0em;"

il avance de 00.2em toutes les minutes jusqu'à 65em

Merci pour votre aide.

Romain

Bonsoir. D'accord, mais qu'est-ce qui déclenche l'événement ? La fin du chargement de la page (.addEventListener + 'load') ? Un bouton (.addEventListener + 'click') ?

Voici un exemple de code que vous n'aurez pas de mal à adapter :

const progressBarTest = (() => {
  const cmd = document.querySelector('#progress-test-cmd'),
        target = document.querySelector('#progress-test-target')
  cmd && cmd.addEventListener('click', () => {
    let value = target.dataset.value
    setInterval(frame, 10)
        function frame() {
        if (value < 100) {
          value++
          target.querySelector('div').style.width = value + '%'
        }
      }
  }, false)
})()

La démo de ce code ici : Progress Bars, test de 0 à 100%.
Modifié par Olivier C (26 Dec 2022 - 22:44)

Salut,
Merci pour ta réponse. J’ai essayé avec ta méthode ça fonctionne très bien. J’avais pas pensé à faire comme ça.


Je sais pas si c’est possible dans les styles de mettre juste une trait rouge qui avance pas comme j’ai fait où c’est qu’il y a un rectangle qui progresse.


Modifié par SIRIUS_NG (27 Dec 2022 - 13:00)

SIRIUS_NG a écrit :
Je sais pas si c’est possible dans les styles de mettre juste une trait rouge qui avance pas comme j’ai fait où c’est qu’il y a un rectangle qui progresse.

Je ne suis pas sûr d'avoir tout compris... S'il s'agit de rajouter un triangle (c'est bien ça ?) on peut le faire avec un pseudo élément.

En fait il s’agit juste d’un trait rouge, le triangle au-dessus a été enlevé

En gros, je voudrais faire pour que mon très rouge avance mais qu’il n’y es pas toute la barre en rouge qui est juste que le trait qui avance.

Le trait horizontal ? Si oui, on peut utiliser approximativement le même script JS, mais cette fois-ci sur un élément pour lequel on ferait varier non pas les marges mais la largeur (width).

C'est l'une des possibilités mais il faut savoir qu'il y en a d'autres, comme par exemple utiliser un effet de gradients en background pour lequel les points d'arrêts, déterminés avec des variables CSS, seraient pilotés en javascript. Je le fais ici par exemple : voir la barre active entre deux curseurs de .range-multithumb. Mais c'est peut-être un peu beaucoup pousser le bouchon pour un apprentissage, ça fait beaucoup de concepts à maîtriser à la fois pour un intérêt qui est loin d'être évident dans le cas qui nous occupe, je conseille donc plutôt la première solution proposée.
Modifié par Olivier C (27 Dec 2022 - 16:49)