前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用jq做一个数字递增效果

使用jq做一个数字递增效果

作者头像
子舒
发布2022-06-09 14:19:03
7830
发布2022-06-09 14:19:03
举报
文章被收录于专栏:子舒的个人博客

数字递增,顾名思义就是数字不断增加,数字递增的效果就是要一定时间内,让数字有一个增加的特效,一般用于强调某个内容。

用 jquery 也很好处理,大概就是下面这些。

  • data-to 属性代表最后想要递增到的数值
  • data-speed 代表数值想要递增的过程时间

class="num-ber"id="count-number" 按照这个填入。

代码语言:javascript
复制
<p>
  <span class="num-ber" id="count-number" data-to="40" data-speed="1000"></span>+
</p>

引入 jquery 之后再添加下面的 js 代码。

代码语言:javascript
复制
$.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(0)
}
$("#count-number").data("countToOptions", {
  formatter: function (b, a) {
    return b.toFixed(0).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
  }
});
$(".num-ber").each(count);

function count(a) {
  var b = $(this);
  a = $.extend({},
    a || {},
    b.data("countToOptions") || {});
  b.countTo(a)
};
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021 年 09 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档