web-dev-qa-db-fra.com

compteur jQuery pour compter jusqu'à un nombre cible

J'essaie de savoir si quelqu'un est au courant d'un plug-in jQuery existant pouvant compter jusqu'à un nombre cible à une vitesse spécifiée.

Par exemple, jetez un coup d'œil au nombre de Mo d'espace de stockage disponible de Google sur la page d'accueil Gmail , sous le titre "Beaucoup d'espace". Il a un numéro de départ dans une balise <span> et compte lentement vers le haut toutes les secondes.

Je cherche quelque chose de similaire, mais j'aimerais pouvoir 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 pouvant être exécutée lorsqu'un compteur est terminé.
jqueryjquery-pluginstimercounter
44
Matt Huggins

J'ai fini par créer mon propre plugin. 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 d'utilisation:

<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>

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

133
Matt Huggins

Vous pouvez utiliser la fonction jQuery animate

// Enter num from and to
$({countNum: 99}).animate({countNum: 1000}, {
  duration: 8000,
  easing:'linear',
  step: function() {
    // What todo on every count
    console.log(Math.floor(this.countNum));
  },
  complete: function() {
    console.log('finished');
  }
});

http://jsbin.com/upazas/958/

71
FDisk

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

Code de 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);
12
vsync

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);

Usage:

$('#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 démarrera à 1 000 et comptera jusqu'à 4 500 en 8 secondes par intervalles de 500 ms et appellera la fonction de rappel une fois le comptage effectué.

8
Tatu Ulmanen

Je ne connais aucun plugin existant, mais il semble assez facile d’en écrire un vous-même en utilisant le JavaScript Timing Events .

2
Veger

Une approche différente Utilisez Tween.js pour le compteur. Il permet au compteur de ralentir, d’accélérer, de rebondir et d’autres surprises, au fur et à mesure que le compteur arrive à destination.

http://jsbin.com/ekohep/2/edit#javascript,html,live

Prendre plaisir :)

PS, n'utilise pas jQuery - mais pourrait le faire.

2
user774904

Essayez jCounter , il a un paramètre customRange dans lequel vous pouvez spécifier le nombre de début et de fin. Il peut compter également, y compris le repli que vous voulez à la fin.

1
SirCommy

J'avais besoin d'une pause, alors j'ai bricolé ce qui suit ensemble. Pas sûr que cela vaille la peine de créer un plugin à partir de.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Counter
        </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
        <script type="text/javascript">
            //<![CDATA[
                function createCounter(elementId,start,end,totalTime,callback)
                {
                    var jTarget=jQuery("#"+elementId);
                    var interval=totalTime/(end-start);
                    var intervalId;
                    var current=start;
                    var f=function(){
                        jTarget.text(current);
                        if(current==end)
                        {
                            clearInterval(intervalId);
                            if(callback)
                            {
                                callback();
                            }
                        }
                        ++current;
                    }
                    intervalId=setInterval(f,interval);
                    f();
                }
                jQuery(document).ready(function(){
                    createCounter("counterTarget",0,20,5000,function(){
                        alert("finished")
                    })
                })
            //]]>
        </script>
    </head>
    <body>
        <div id="counterTarget"></div>
    </body>
</html>
0
spender

Une autre façon de faire cela sans jQuery serait d'utiliser la bibliothèque TweenLite JS de Greensock. 

Démo http://codepen.io/anon/pen/yNWwEJ

var display = document.getElementById("display");
var number = {param:0};
var duration = 1;

function count() {
  TweenLite.to(number, duration, {param:"+=20", roundProps:"param",
  onUpdate:update, onComplete:complete, ease:Linear.easeNone});
}

function update() {
  display.innerHTML = number.param;
}

function complete() {
  //alert("Complete");
}

count();
0
sputn1k