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 相关文章推荐
一个基于jquery的文本框记数器
Sep 19 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
canvas绘制多边形
Feb 24 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 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与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
ES6对象操作实例详解
2020/05/23 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
python sort、sorted高级排序技巧
2014/11/21 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python删除服务器文件代码示例
2018/02/09 Python
python实现转圈打印矩阵
2019/03/02 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
幼儿园课题方案
2014/06/09 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
导师鉴定意见
2015/06/05 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android