首页 > 编程 > JavaScript > 正文

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

2019-11-19 16:39:39
字体:
来源:转载
供稿:网友

上周五应着公司临时需求,一天的时间解决掉官网(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下载的小伙伴在下面点击下载吧!

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

demo下载请点击

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持武林网!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表