有的时候我们在进行增加或者减少时会需要进行数字的增加喝减少的效果:
function countToNumber(number, duration, suffix) {
console.log('数字进行增加')
$({
count: number - app.temp,
}).animate(
{
count: number,
},
{
duration: duration ? duration : 1000,
easing: 'swing',
step: function (now) {
$('.moneytext').text('$' + Math.floor(now * 100) / 100)
},
complete: function () {
countingFromZero = false
$('.moneytext').text('$' + Math.floor(number * 100) / 100 + suffix)
$('.card').each(function () {
if (!$(this).hasClass('open')) {
$(this).css({
pointerEvents: 'auto',
})
}
})
if (number === 850) {
$('.light').show()
setTimeout(() => {
end()
}, 1400)
}
},
}
)
}
复用所以写成一个函数的形式,其中的moneytext就是我们的数字,对它进行不断的更改
number:就是我们最终变化变化到的数字。
duration:这是我们进行数字增加的一个时间,和定时器一样 1000=1s。
suffix:这是我用来添加数字结尾的一个字符串(’.00‘)是计算到了小数点后两位,同时这个函数在进行+/-的时候是进行小数点后两位的变化的,最后为一个整数。
调用:
app.temp = 25
countToNumber(55, 1000, '.00')
其中的temp是你原始值到目标值的区间量。
app.temp需要自己声明,我本来创建了app,所以直接把temp放进app了
这样就可以进行一个数字的逐渐增加/减少的效果了
***小白勿喷***