Compteur jQuery pour compter jusqu'à un nombre cible

Question

Je cherche à savoir si quelqu'un connaît un plugin jQuery déjà existant qui comptera jusqu'à un nombre cible à une vitesse spécifiée.

Par exemple, regardez le nombre de Mo de stockage gratuit sur le site de Google. Page d'accueil de Gmail sous la rubrique "Beaucoup d'espace". Il a un numéro de départ dans un <span> et compte lentement vers le haut chaque seconde.

Je cherche quelque chose de similaire, mais j'aimerais pouvoir le préciser :

• Le numéro de départ
• Le numéro de fin
• Le temps qu'il faut pour aller du début à la fin.
• Une fonction de rappel personnalisée qui peut être exécutée lorsqu'un compteur est terminé.

Answer 1

J'ai fini par créer mon propre plugin. Le voici au cas où cela aiderait quelqu'un :

(function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});

        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;

        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals));

                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,  // the number the element should start at
        to: 100,  // the number the element should end at
        speed: 1000,  // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,  // the number of decimal places to show
        onUpdate: null,  // callback method for every time the element is updated,
        onComplete: null,  // callback method for when the element finishes updating
    };
})(jQuery);

Voici un exemple de code permettant de l'utiliser :

<script type="text/javascript"><!--
    jQuery(function($) {
        $('.timer').countTo({
            from: 50,
            to: 2500,
            speed: 1000,
            refreshInterval: 50,
            onComplete: function(value) {
                console.debug(this);
            }
        });
    });
//--></script>

<span class="timer"></span>

Regardez la démo sur JSFiddle : http://jsfiddle.net/YWn9t/

Answer 2

Vous pouvez utiliser le jQuery animate fonction

$({ countNum: 0 }).animate({ countNum: 10 }, {
  duration: 10000, // tune the speed here
  easing: 'linear',
  step: function() {
    // What todo on every count
    console.log(this.countNum);
  },
  complete: function() {
    console.log('finished');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

J'ai créé le plus petit code pour faire exactement ça. Ce n'est pas seulement pour compter mais pour toute tâche qui doit être exécutée dans un temps donné. (disons, faire quelque chose pendant 5 secondes) :

• Page de démonstration du Codepen

• Do-In : Projet Github (super léger, minuscule script)

Démonstration :

var step = function(t, elapsed){
    // easing 
    t = t*t*t;

    // calculate new value
    var value = 300 * t; // will count from 0 to 300

    // limit value ("t" might be higher than "1")
    if( t > 0.999 )
        value = 300;

    // print value (converts it to an integer)
    someElement.innerHTML = value|0;
};

var done = function(){
    console.log('done counting!');
};

// Do-in settings object
var settings = {
    step     : step,
    duration : 3,
    done     : done,
    fps      : 24 // optional. Default is requestAnimationFrame
};

// initialize "Do-in" instance 
var doin = new Doin(settings);

Answer 4

Je ne connais pas les plugins mais cela ne devrait pas être trop difficile :

;(function($) {        
     $.fn.counter = function(options) {
        // Set default values
        var defaults = {
            start: 0,
            end: 10,
            time: 10,
            step: 1000,
            callback: function() { }
        }
        var options = $.extend(defaults, options);            
        // The actual function that does the counting
        var counterFunc = function(el, increment, end, step) {
            var value = parseInt(el.html(), 10) + increment;
            if(value >= end) {
                el.html(Math.round(end));
                options.callback();
            } else {
                el.html(Math.round(value));
                setTimeout(counterFunc, step, el, increment, end, step);
            }
        }            
        // Set initial value
        $(this).html(Math.round(options.start));
        // Calculate the increment on each step
        var increment = (options.end - options.start) / ((1000 / options.step) * options.time);            
        // Call the counter function in a closure to avoid conflicts
        (function(e, i, o, s) {
            setTimeout(counterFunc, s, e, i, o, s);
        })($(this), increment, options.end, options.step);
    }
})(jQuery);

Utilisation :

$('#foo').counter({
    start: 1000,
    end: 4500,
    time: 8,
    step: 500,
    callback: function() {
        alert("I'm done!");
    }
});

Exemple :

http://www.ulmanen.fi/stuff/counter.php

Je suppose que l'utilisation est explicite ; dans cet exemple, le compteur partira de 1000 et comptera jusqu'à 4500 en 8 secondes par intervalles de 500 ms, et appellera la fonction de rappel lorsque le comptage sera terminé.

Answer 5

Je ne sais pas s'il existe des plugins existants, mais il semble assez facile d'en écrire un soi-même en utilisant la fonction Événements de chronométrage JavaScript .