J'essaie de faire une barre de chargement mais avec un pourcentage. Je veux dire, imaginez que quand il est à 50%, il montrera également ce nombre, il remplira jusqu'à la moitié. Si c'est 75%, cela augmentera jusqu'à 3/4.

J'essaie de le faire avec HTML, CSS et JS. Jusqu'à présent, j'ai tout inventé, mais en même temps, le nombre augmentera (en cliquant sur le bouton) et le motif se remplira en fonction du pourcentage? Cette partie me met au défi. Pouvez-vous me guider si c'est possible? Ou même s'il y a un exemple pour que je puisse apprendre?

MISE À JOUR DU CODE CI-DESSOUS

    <script>
      var i = 0;

      function buttonClick5() {
        i += 5;
        document.getElementById('demo').innerHTML = i + "€";

      }

      function percentage(per) {
        return (100 / 100) * per;
      }

    </script>
    <div class="textContainer">
    <p class="perc" id="here"></p>
    <script>
      document.getElementById('here').textContent = percentage(10) + "%";
    </script>
    <h2 id="demo">0€</h2>
  </div>

et partie css

.textContainer {
margin-top:-10%;
margin-left: 30%;
height: auto;

  text-align: center;
}

.textContainer h2 {

margin-left: -40%;
  font-size: 500px;
  color: rgba(225, 225, 225, .1);
  background-image:  url(color3.jpg);
  background-repeat:repeat;
  -webkit-background-clip: text;
  animation: animateMid 15s linear infinite;
}

@keyframes animateMid {
  0% {
    background-position: left 0px top 0px;
  }

  1% {
    background-position: left 1200px top 0px;
  }
}

avec ceux-là, je peux simplement faire en sorte que le motif se déplace comme arrière-plan du pourcentage, mais toujours à 100%.

-2
Özkan Adar 7 nov. 2019 à 21:20

1 réponse

Utilisez votre variable de pourcentage comme largeur de la division qui indique la progression. Ajoutez un écouteur de clic à votre bouton qui mettra à jour cette variable en pourcentage et la largeur de la div. Si vous créez une fonction de rappel qui met à jour les deux en même temps, cela vous sera facile. Partagez votre code ici afin que nous puissions vous aider davantage.

0
Samet Mutevelli 7 nov. 2019 à 18:30