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高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
vue iview 隐藏Table组件里的某一列操作
Nov 13 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实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
js中的push和join方法使用介绍
2013/10/08 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
python使用fork实现守护进程的方法
2017/11/16 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
python global关键字的用法详解
2019/09/05 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
临床医学大学生求职信
2013/09/28 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
职业生涯规划书范文
2014/03/10 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
政协会议宣传标语
2014/10/09 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
首都博物馆观后感
2015/06/05 职场文书
教师个人教学反思
2016/02/23 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL