jQuery compteur pour compter jusqu'à un nombre cible
J'essaie de 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 de Google sur la page D'accueil Gmail, sous la rubrique "beaucoup d'espace". Il a un numéro de départ dans une balise <span>, et compte lentement vers le haut chaque seconde.
Je cherche quelque chose de similaire, mais j'aimerais pouvoir spécifier:
- le début nombre
- le numéro de fin
- La quantité de temps il devrait prendre pour obtenir du début à la fin.
- une fonction de rappel personnalisée qui peut s'exécuter lorsqu'un compteur est terminé.
10 réponses
J'ai fini par créer mon propre plugin. Ici, c'est 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 pour 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>
Voir la démo sur JSFiddle: http://jsfiddle.net/YWn9t/
Vous pouvez utiliser la fonctionjQuery 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');
}
});
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 s'exécuter 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);
Je ne connais pas les plugins mais cela ne devrait pas être trop dur:
;(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:
Je suppose que l'utilisation est explicite; dans cet exemple, le compteur commencera à partir de 1000 et comptera jusqu'à 4500 en 8 secondes à des intervalles de 500 ms, et appellera la fonction de rappel lorsque le comptage est terminé.
Je ne connais aucun plugin existant, mais il semble assez facile d'en écrire un vous-même en utilisant les événements de synchronisation JavaScript .
Une approche différente. L'Utilisation D'Interpolation.js pour le compteur. Il permet au compteur de ralentir, accélérer, rebondir, et un grand nombre d'autres goodies, comme le compteur arrive à l'endroit où il va.
Http://jsbin.com/ekohep/2/edit#javascript,html,vivre
Profitez :)
PS, n'utilise pas jQuery - mais évidemment pourrait.
Avait besoin d'une pause, alors j'ai bricolé ce qui suit ensemble. Je ne suis pas sûr que cela vaudrait la peine de créer un plugin à partir de si.
<!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>
Une autre façon de le faire 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();
Vous pouvez utiliser la fonction jQuery animate pour cela.
$({ countNum: $('.code').html() }).animate({ countNum: 4000 }, {
duration: 8000,
easing: 'linear',
step: function () {
$('.code').html(Math.floor(this.countNum) );
},
complete: function () {
$('.code').html(this.countNum);
//alert('finished');
}
});
Voici l'article original http://mishelshaji.co.in/2018/animated-number-counter-using-jquery/