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代码
Sep 02 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
实例教学如何写vue插件
Nov 30 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 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中json_decode()和json_encode()的使用方法
2012/06/04 PHP
新手入门常用代码集锦
2007/01/11 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
神经网络理论基础及Python实现详解
2017/12/15 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python3实现多线程聊天室
2018/12/12 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
浅谈django channels 路由误导
2020/05/28 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
《要下雨了》教学反思
2014/02/17 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
高一地理教学工作总结
2015/08/12 职场文书
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis