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调试工具汇总
Dec 23 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
jQuery ajax应用总结
Jun 02 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 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
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
PHP7匿名类用法分析
2016/09/26 PHP
js停止输出代码
2008/07/20 Javascript
Prototype String对象 学习
2009/07/19 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
小程序实现录音功能
2020/09/22 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
自己使用总结Python程序代码片段
2015/06/02 Python
Python实现把数字转换成中文
2015/06/29 Python
Python复制文件操作实例详解
2015/11/10 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
社区工作感言
2014/02/21 职场文书
百日安全活动总结
2014/05/04 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL
Android实现图片九宫格
2022/06/28 Java/Android