js实现数字递增特效【仿支付宝我的财富】
编程学习 2021-07-04 18:32www.dzhlxh.cn编程入门
本篇文章主要介绍了js实现仿支付宝我的财富里的数字递增特效，具有很好的参考价值。狼蚁网站SEO优化跟着长沙网络推广一起来看下吧
上周五应着公司临时需求，一天的时间解决掉官网（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>
上面我们来了解两个关键的东西：
- 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下载的小伙伴在狼蚁网站SEO优化点击下载吧！
其实这个插件可扩展性很大的，至于小伙伴喜欢什么样子的显示自己动手改造吧！
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持狼蚁SEO！