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实现的listview效果
Apr 28 Javascript
简单的JS多重继承示例
Mar 13 Javascript
小议Javascript中的this指针
Mar 18 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
使用JS实现简易计算器
Jun 14 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
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
PHP实现简单登录界面
2019/10/23 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
python利用sklearn包编写决策树源代码
2017/12/21 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
学生实习证明模板汇总
2014/09/25 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
暂住证证明
2015/06/19 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python