js implementation of digital increment special effects example code

This article mainly introduces the JS implementation of the digital increment effect in imitating Alipay My Wealth, which has a good reference value. Let’s take a look at it with the editor.

Last Friday, in response to the company’s temporary needs, we solved the official website in one day (ps: relatively simple haha). There is a special effect in the demand that is to increase the number to a specified value. , in fact, writing JS is not complicated, but I found a small js plug-in. This plug-in is light and simple, and it is also very simple and practical to use. Share it here with your little friends, take it if you like it.

The above is the effect of this plug-in, let’s take a look at how to use it

First: Here is a brief list of the HTML part

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

Let’s understand two key things above:

• data-to This attribute Control the value you want to eventually increment

• data-speed The meaning of this in English is very clear, it means The speed of data increment is

ps: The class and id here can be adjusted according to everyone’s own modifications,

Second: The JS part is also the core code of the 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)
};

The above is all the code, the css part will not be displayed here. If you want to download the demo, click to download it below!

In fact, this plug-in is very scalable. As for what kind of display your friends like, you can modify it yourself!

The above is the detailed content of js implementation of digital increment special effects example code. For more information, please follow other related articles on the PHP Chinese website!