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模块模式分析
May 16 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
原生JS实现音乐播放器
Jan 26 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实现数组筛选奇数和偶数示例
2014/04/11 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
Javascript的匿名函数小结
2009/12/31 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
Python性能优化的20条建议
2014/10/25 Python
Python的time模块中的常用方法整理
2015/06/18 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
超市开学活动方案
2014/03/01 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
2014年度工作总结报告
2014/12/15 职场文书
关于运动会的广播稿
2015/08/19 职场文书
领导干部学习心得体会
2016/01/23 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang