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 相关文章推荐
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
10个实用的脚本代码工具
May 04 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
常用的js方法合集
Mar 10 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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
用PHP4访问Oracle815
2006/10/09 PHP
php导出excel格式数据问题
2014/03/11 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
js获取变量
2006/08/24 Javascript
JObj预览一个JS的框架
2008/03/13 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
urllib2自定义opener详解
2014/02/07 Python
python读取浮点数和读取文本文件示例
2014/05/06 Python
简单介绍Python中的JSON使用
2015/04/28 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
我的小天地教学反思
2014/04/30 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
董事长岗位职责
2015/02/13 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
民事纠纷协议书
2016/03/23 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题