当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js实现数字递增特效【仿支付宝我的财富】

js实现数字递增特效【仿支付宝我的财富】

2018年05月07日  | 移动技术网IT编程  | 我要评论

上周五应着公司临时需求，一天的时间解决掉官网（ps：比较简单哈哈），需求里面有一个特效就是数字递增到指定的数值，其实js写也不复杂的，但是我发现一个js小插件，这个插件轻巧简单，用起来也非常简单实用。在这里分享给小盆友们吧，喜欢的直接拿走。

上面就是这个插件的效果，我们来看一下怎么使用的吧

第一： html部分这里简单列举一个

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

上面我们来了解两个关键的东西：

  • data-to   这个属性控制你最终要递增的数值是多少
  • data-speed    这个看英文的意思就很清楚了就是表示数据递增的速度了

ps： 这里的class和id  根据大家各自的修改去调整就好了，

第二：js部分也是插件的核心代码

$.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)
};

以上就是代码的全部了，css部分就不在这里显示了，demo下载的小伙伴在下面点击下载吧！

其实这个插件可扩展性很大的，至于小伙伴喜欢什么样子的显示自己动手改造吧！

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网