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

 更新时间:2017年05月05日 12:03:54   作者:小月博客  
本篇文章主要介绍了js实现仿支付宝我的财富里的数字递增特效,具有很好的参考价值。下面跟着小编一起来看下吧

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

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

相关文章

  • js 多层叠的TAB选项卡

    js 多层叠的TAB选项卡

    一个多层叠的TAB选项卡,自适应宽度(自行更改nonstop的width测试效果)。
    2010-01-01
  • js查错流程归纳

    js查错流程归纳

    归纳是为了更好的理解。平时同事有问题找我帮忙解决问题,往往都是很小的问题,这种情况他们并不是缺乏解决问题的知识,而是需要找到问题的办法
    2012-05-05
  • JavaScript本地数据存储sessionStorage与localStorage使用详解

    JavaScript本地数据存储sessionStorage与localStorage使用详解

    这篇文章主要介绍了JavaScript本地数据存储sessionStorage与localStorage使用,localStorage:永久存储在本地,适合保存在本地的数据。sessionStorage:会话级的存储,敏感帐号一次登陆
    2022-10-10
  • HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)

    HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)

    这篇文章主要介绍了HTML5游戏引擎LTweenLite实现的超帅动画效果,详细分析了LTweenLite的下载,动画效果的实现步骤,并附带完整的demo实例源码供读者下载,需要的朋友可以参考下
    2016-01-01
  • 详解微信小程序框架wepy踩坑记录(与vue对比)

    详解微信小程序框架wepy踩坑记录(与vue对比)

    这篇文章主要介绍了详解微信小程序框架wepy踩坑记录(与vue对比),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 简短几句 通俗解释javascript的闭包

    简短几句 通俗解释javascript的闭包

    什么是闭包呢?闭包就是函数实例执行过程中动态产生一个没有被释放资源的栈区,也是一个预执行的过程。
    2011-01-01
  • JavaScript导出CSV文件不完整的问题解决方法

    JavaScript导出CSV文件不完整的问题解决方法

    在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等,这些字符可能会影响CSV文件的解析,导致数据错乱,所以本文给大家介绍了如何解决JavaScript导出CSV文件不完整的问题,需要的朋友可以参考下
    2024-06-06
  • MyEclipse取消验证Js的两种方法

    MyEclipse取消验证Js的两种方法

    通过js写一个web工程的相关页面时感觉很卡,修改内存也不行下面有两种解决方法,大家可以尝试下
    2013-11-11
  • 浅析JavaScript Array和string的转换(推荐)

    浅析JavaScript Array和string的转换(推荐)

    下面小编就为大家带来一篇浅析JavaScript Array和string的转换(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • javascript canvas封装动态时钟

    javascript canvas封装动态时钟

    这篇文章主要为大家详细介绍了javascript canvas封装动态时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09

最新评论