Compteur de chiffre qui augmente dans une phrase. par ThomasBidault - page 1

Salut,

voilà comment tu peux faire :

<script>
        const chiffre = 1150;//le chiffre à atteindre
        const tpsTotal = 2000;//le temps pour atteindre le chiffre
        const tps = 10;//le délai entre chaque appel de la fonction
        const ratio = tpsTotal/tps;//on garde un ratio, si tu changes le tpsTotal à 8000, on mettra 8 secondes pour atteindre le chiffre
        let count = 0;
 
        let interv = setInterval(anim, tps); //on lance "anim" toutes les "tps" millisecondes, soit 10 ms
        const input = document.querySelector("#test");
 
        function anim(){
            count += Math.ceil(chiffre/ratio);//on arrondit au chiffre le plus haut
            input.innerHTML = count;
            if ( count > chiffre ) {
                clearInterval(interv); //quand on a atteint le chiffre, on arrête l'interval, pour que le navigateur ne travaille pas pour rien
                count = 0;
            }
        }
    </script>

avec le code en-dessous, tu as une ligne avec le temps, pour te montrer que si tu changes le chiffre à atteindre (1150), disons si tu mets 300 ou 5000, il va toujours mettre que 2 secondes pour atteindre le chiffre (ici 2 secondes c'est 2000 millisecondes). Tu peux faire les tests que tu veux : si tu mets 8000 au lieu de 2000, tu vas voir le chiffre augmenter plus lentement. Si tu mets 500, tu vas voir ton chiffre défiler beaucoup plus rapidement :

<body>

    <div id="test">0</div>

    <br>

    <div id="temps">0</div>

    <script>
        const chiffre = 1150;
        const tpsTotal = 2000;
        const tps = 10;
        const ratio = tpsTotal/tps;

        let count = 0;
        let countTps = 0;

        let interv = setInterval(anim, tps);
        const input = document.querySelector("#test");

        let intervTps = setInterval(compteurTps, 1000);
        const temps = document.querySelector("#temps");

        function compteurTps(){
            countTps += 1;
            temps.innerHTML = countTps;
            if (countTps >= tpsTotal/1000) clearInterval(intervTps);
        }

        function anim(){
            count += Math.ceil(chiffre/ratio);
            input.innerHTML = count;
            if ( count > chiffre ) clearInterval(interv); 
        }
    </script>
</body>

-
Edité par Arthur222 12 juin 2022 à 17:59:09

ThomasBidault

12 juin 2022 à 11:29:23

Bonjour, parmi plusieurs forum et beaucoup de recherche, je n'ai pas trouvé comment faire un compteur de chiffre dans une phrase.

Je m'explique, je voudrais écrire "Nous avons trouvé 128 ressources" avec le chiffre 128 qui est animée par un compteur qui commence de 0 à 128 dans un délai/vitesse d'environ 1-2 secondes.

Exemple typique de ce que je voudrais faire : Lien cliquable

Pensez-vous pouvoir m'aider à trouver le code afin de le mettre sur mon site web ?

Arthur222

12 juin 2022 à 17:48:29

Compteur de chiffre qui augmente dans une phrase.

Compteur de chiffre qui augmente dans une phrase.

Supprimer

Modérer

Signaler le message aux modérateurs