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 异常处理使用总结
Jun 21 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
理解javascript闭包
Dec 15 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
iview实现图片上传功能
Jun 29 Javascript
vue v-model的用法解析
Oct 19 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
打造计数器DIY三步曲(中)
2006/10/09 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
Python用模块pytz来转换时区
2016/08/19 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Python类的继承super相关原理解析
2020/10/22 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
如何写出好的Java代码
2014/04/25 面试题
关于安全的演讲稿
2014/05/09 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
2016年国培研修日志
2015/11/13 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技