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

上周五响应公司临时需求，官网一天就解决了(ps:比较简单哈哈)。需求中的特殊效果之一是数量增加到指定值。其实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上面，我们学到了两个关键的东西：

数据的这个属性控制着你最终将增加多少数据速度。在英语中很清楚，它意味着数据增量的速度。ps:这里的类和id可以根据大家自己的修改进行调整。

第二：JS也是插件的核心代码

$.fn.countTo=函数(a){ a=a | | { }；返回$(这个)。每个(函数(){ var c=$。extend({}，$.fn.countTo.defaults，{ from: $(this)。数据(' from ')，到： $(this)。数据(' to ')，speed: $(this)。数据('速度')，refreshInterval: $(这个)。数据('刷新间隔')，decimals: $(this)。数据('小数')}，a)；var h=math . ceil(c . speed/c . refresh interval)，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=set interval(k，c . refresh interval)；b(g)；函数k(){ g=I；e；b(g)；if(type of(c . onupdate)=' function '){ c . onupdate . call(j，g)} if(e=h){ f . remove data(' countTo ')；clearInterval(d . interval)；g=c.toif(type of(c . on complete)=' function '){ c . on complete . 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 0，formatter: formatter，onUpdate: null，on complete 3360 null }；函数格式化程序(b，a){ return b . tofixed(2)} $(' # count-number ')。data(' counttoooptions '，{ formatter:函数(b，a) { return b.toFixed(2))。替换(/\B(？=(?\d{3})(？\d))/g '，')})；$('.计时器’)。每个(计数)；函数计数(a){ var b=$(this)；a=$。extend({}，a || {}，b . data(' counttoooptions ')| | { })；b . countto(a)}；这就是全部代码。这里没有显示css。演示下载合作伙伴可以点击下方下载。

事实上，这个插件有很大的可扩展性。至于你的朋友喜欢什么样的展示，你自己去做吧！

请点击下载演示

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！