jQuery compteur pour compter jusqu'à un nombre cible
J'essaie de savoir si quelqu'un sait à ce sujet existe déjà un plugin jQuery qui va compter jusqu'à un nombre cible à une vitesse spécifiée.
Par exemple, prenons un coup d'oeil sur Google le nombre de MO de stockage gratuit sur le Page d'accueil Gmail, sous la rubrique intitulée "de l'espace". Il a un nombre de départ dans un <span>
tag, et lentement compte à la hausse à chaque seconde.
Je suis à la recherche de quelque chose de similaire, mais je voudrais être en mesure de préciser:
- Le nombre de départ
- La fin du numéro de
- La quantité de temps il devrait prendre pour obtenir du début à la fin.
- Une coutume fonction de rappel qui peut s'exécuter lorsqu'un compteur est fini.
Vous devez vous connecter pour publier un commentaire.
J'ai fini par créer mon propre plugin. Ici, il est dans le cas où cette aide n'importe qui:
Voici un exemple de code de comment l'utiliser:
Voir la démo sur JSFiddle: http://jsfiddle.net/YWn9t/
Vous pouvez utiliser le jQuery animate fonction
http://jsbin.com/upazas/958/
complete
méthode pourrait être mis à jour pour inclure cette ligne ainsi pour s'assurer qu'il atteint le dernier numéro:$('#counter').text(this.countNum);
Math.floor(this.countNum)
avecthis.countNum.toFixed(2)
bower install jquery.easing --save
), permettant aux plus complexes assouplissement des algorithmes (voir easings.net pour tous les prédéfinis levées).J'ai créé le moindre code pour faire exactement cela. Ce n'est pas seulement pour compter, mais pour toutes les tâches que doit exécuter dans un temps donné. (disons, faire quelque chose pour 5 secondes):
Page De Démonstration
Projet Github
Le code de démonstration:
Ne sais pas à propos de plugins, mais cela ne devrait pas être trop dur:
Utilisation:
Exemple:
Je suppose que l'utilisation est auto-explicatif; dans cet exemple, le compteur commencera à partir de 1000 et compter jusqu'à 4500 dans les 8 secondes dans 500ms intervalles, et va appeler la fonction de rappel lorsque le décompte est terminé.
Je ne sais pas pour les plugins existants, mais il semble assez facile d'écrire un vous-même à l'aide de la JavaScript Calendrier Des Événements.
Une approche différente. Utilisation Tween.js pour le compteur. Il permet à l'encontre de ralentir, d'accélérer, de rebondir, et un tas d'autres goodies, que le compteur arrive à où la sa va.
http://jsbin.com/ekohep/2/edit#javascript,html,vivre
Profiter 🙂
PS, ne pas utiliser jQuery - mais pouvait évidemment.
Besoin d'une pause, j'ai donc bricolé la suite ensemble. Pas sûr, il serait utile de créer un plugin de bien.
Essayer jCounter, il a un customRange environnement où vous pouvez spécifier le début et la fin de numéro, il peut compter aussi bien, y compris le secours que vous voulez à la fin.
Une autre façon de le faire sans jQuery serait d'utiliser Greensock de TweenLite bibliothèque JS.
Démo http://codepen.io/anon/pen/yNWwEJ
CodePen Exemple De Travail
Pour plus d'GitHub repo
Vous pouvez utiliser la fonction animate de jquery pour que.
Voici la article original