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 相关文章推荐
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
小程序实现列表展开收起效果
Jul 29 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 array_merge下进行数组合并的代码
2008/07/22 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
Smarty保留变量用法分析
2016/05/23 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
node.js的事件机制
2017/02/08 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
python机器学习之贝叶斯分类
2018/03/26 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
高二物理教学反思
2014/02/08 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
新闻传播专业求职信
2014/07/22 职场文书
云冈石窟导游词
2015/02/04 职场文书
综合管理员岗位职责
2015/02/11 职场文书
地道战观后感
2015/06/04 职场文书
远程教育培训心得体会
2016/01/09 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP