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 相关文章推荐
js跨域请求数据的3种常用的方法
Dec 01 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
JS闭包原理及其使用场景解析
Dec 03 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 foreach、while性能比较
2009/10/15 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
php中stream(流)的用法
2014/03/25 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
Python多线程编程(五):死锁的形成
2015/04/05 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
python中rb含义理解
2020/06/18 Python
python 如何停止一个死循环的线程
2020/11/24 Python
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
请解释在new与override的区别
2012/10/29 面试题
业务副厂长岗位职责
2014/01/03 职场文书
中国好声音广告词
2014/03/18 职场文书
个人授权委托书
2014/04/03 职场文书
设计顾问服务计划书
2014/05/04 职场文书
工作失职检讨书
2015/01/26 职场文书
资料员岗位职责
2015/02/10 职场文书
摩登时代观后感
2015/06/03 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
python Tkinter模块使用方法详解
2022/04/07 Python
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python