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 相关文章推荐
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
vue生命周期的探索
Apr 03 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
jQuery实现日历效果
Sep 11 jQuery
vue中watch的用法汇总
Dec 28 Vue.js
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
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
python单链表实现代码实例
2013/11/21 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
python flask中静态文件的管理方法
2018/03/20 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
Python理解递归的方法总结
2019/01/28 Python
简单了解python关系(比较)运算符
2019/07/08 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
python实现学生成绩测评系统
2020/06/22 Python
用python读取xlsx文件
2020/12/17 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
C有"按引用传递"吗
2016/09/06 面试题
情人节寄语大全
2014/04/11 职场文书
员工2014年度工作总结
2014/12/09 职场文书
安阳殷墟导游词
2015/02/10 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
python实现高效的遗传算法
2021/04/07 Python
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸