js实现数字递增特效【仿支付宝我的财富】

上周五应着公司临时需求,一天的时间解决掉官网(ps:比较简单哈哈),需求里面有一个特效就是数字递增到指定的数值,其实JS写也不复杂的,但是我发现一个js小插件,这个插件轻巧简单,用起来也非常简单实用。在这里分享给小盆友们吧,喜欢的直接拿走。

上面就是这个插件效果,我们来看一下怎么使用的吧

第一: HTML部分这里简单列举一个

rush:xhtml;">

博客

上面我们来了解两个关键的东西:

  • data-to

    这个属性控制你最终要递增的数值是多少
  • data-speed

    这个看英文的意思就很清楚了就是表示数据递增的速度了

ps: 这里的class和id 根据大家各自的修改去调整就好了,

第二:JS部分也是插件的核心代码

= 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下载的小伙伴在下面点击下载吧!

其实这个插件可扩展性很大的,至于小伙伴喜欢什么样子的显示自己动手改造吧!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...