Partager l'implémentation de js (imitation de ma richesse) code d'effets spéciaux d'incrémentation numérique

Cet article présente principalement la mise en œuvre de js pour imiter l'effet d'incrémentation numérique dans Alipay My Wealth, qui a une très bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous

Vendredi dernier, en réponse aux besoins temporaires de l'entreprise, nous avons résolu le site officiel en une journée (ps : relativement simple haha). demande qui consiste à augmenter le nombre à une valeur spécifiée, en fait, écrire du JS n'est pas compliqué, mais j'ai trouvé un petit plug-in js qui est léger et simple, et il est également très simple et pratique à utiliser. utiliser. Partagez-le ici avec vos petits amis, prenez-le si vous l'aimez.

Ce qui précède est l'effet de ce plug-in, voyons comment l'utiliser

Tout d'abord : voici un bref liste de la partie HTML

 <p class="counter col_fourth">
  <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2>
  <p class="count-text ">小月博客</p>
 </p>

Comprenons deux choses clés ci-dessus :

• données à thisAttributContrôlez la valeur finale que vous souhaitez incrémenter

• data-speed La signification de ceci en anglais est très clair Cela signifie la vitesse d'incrémentation des données

ps : La classe et l'identifiant ici peuvent être ajustés en fonction des modifications de chacun,

Deuxième : La partie JS est également le code principal du plug-in

$.fn.countTo = function(a) {
  a = a || {};
  return $(this).each(function() {
   var c = $.extend({},
   $.fn.countTo.defaults, {
    from: $(this).data("from"),
    to: $(this).data("to"),
    speed: $(this).data("speed"),
    refreshInterval: $(this).data("refresh-interval"),
    decimals: $(this).data("decimals")
   }, a);
  var h = Math.ceil(c.speed / c.refreshInterval),
  i = (c.to - c.from) / h;
  var j = this,
  f = $(this),
  e = 0,
  g = c.from,
  d = f.data("countTo") || {};
  f.data("countTo", d);
  if (d.interval) {
   clearInterval(d.interval)
  }
  d.interval = setInterval(k, c.refreshInterval);
  b(g);
  function k() {
   g += i;
   e++;
   b(g);
   if (typeof(c.onUpdate) == "function") {
    c.onUpdate.call(j, g)
   }
   if (e >= h) {
    f.removeData("countTo");
    clearInterval(d.interval);
    g = c.to;
    if (typeof(c.onComplete) == "function") {
     c.onComplete.call(j, g)
    }
   }
  }
  function b(m) {
   var l = c.formatter.call(j, m, c);
   f.html(l)
  }
 })
};
$.fn.countTo.defaults = {
  from: 0,
  to: 0,
  speed: 1000,
  refreshInterval: 100,
  decimals: 0,
  formatter: formatter,
  onUpdate: null,
  onComplete: null
};
function formatter(b, a) {
  return b.toFixed(2)
}
$("#count-number").data("countToOptions", {
  formatter: function(b, a) {
   return b.toFixed(2).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
  }
});
$(".timer").each(count);
function count(a) {
  var b = $(this);
  a = $.extend({},
  a || {},
  b.data("countToOptions") || {});
  b.countTo(a)
};

Ce qui précède est tout le code, la partie CSS ne sera pas affichée ici Si vous le souhaitez. téléchargez la démo, cliquez pour la télécharger ci-dessous !

En fait, ce plug-in est très évolutif Quant au type d'affichage que vos amis aiment, vous pouvez le modifier vous-même !

[Recommandations associées]

1. Tutoriel vidéo en ligne js gratuit

2 Manuel de référence en chinois JavaScript

.

3. php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!