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


Posted in Javascript onMay 05, 2017

上周五应着公司临时需求,一天的时间解决掉官网(ps:比较简单哈哈),需求里面有一个特效就是数字递增到指定的数值,其实JS写也不复杂的,但是我发现一个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下载请点击

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

Javascript 相关文章推荐
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
javascript自定义的addClass()方法
May 28 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
Angular2安装angular-cli
May 21 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
提升页面加载速度的插件InstantClick
Sep 12 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 Javascript
js和jquery中获取非行间样式
May 05 #jQuery
值得分享和收藏的xmlplus组件学习教程
May 05 #Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 #Javascript
微信小程序 开发之全局配置
May 05 #Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 #jQuery
微信小程序 图片上传实例详解
May 05 #Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 #Javascript
You might like
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
利用python代码写的12306订票代码
2015/12/20 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
django 将model转换为字典的方法示例
2018/10/16 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
python实发邮件实例详解
2019/11/11 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
如何把python项目部署到linux服务器
2020/08/26 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
优秀教师先进事迹
2014/01/22 职场文书
公司活动方案范文
2014/03/06 职场文书
运动会标语
2014/06/21 职场文书
募捐感谢信
2015/01/22 职场文书
继续教育个人总结
2015/03/03 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
Python Django ORM连表正反操作技巧
2021/06/13 Python