持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情
1.html
<div class="info_num">
<div class="info_num_box">
/*减小*/
<p class="info_number"><span id="count-number1">30</span>天</p>
<p class="info_nav">快速无缝对接业务</p>
</div>
<div class="info_num_box">
/*增大*/
<p class="info_number"><span><span id="count-number2">0</span>+</span></p>
<p class="info_nav">智能分佣模型</p>
</div>
<div class="info_num_box">
/*增大*/
<p class="info_number"><span><span id="count-number3">0</span>+</span></p>
<p class="info_nav">优质合作商家</p>
</div>
<div class="info_num_box">
/*增大*/
<p class="info_number"><span id="count-number4">80</span>亿流水</p>
<p class="info_nav">提供可靠佣金服务</p>
</div>
</div>
2.方法
/* 数字效果 动画
* 数字自增到某一值动画参数（目标元素,自定义配置）
*/
NumAutoPlusAnimation(targetEle, options, isJust = true) {
/*可以自己改造下传入的参数，按照自己的需求和喜好封装该函数*/
//不传配置就把它绑定在相应html元素的data-xxxx属性上吧
options = options || {};
var $this = document.getElementById(targetEle),
time = options.time || $this.data('time'), //总时间--毫秒为单位
finalNum = options.num || $this.data('value'), //要显示的真实数值
maxNum = options.max || 100, // 如果是减小,此值为初始值
regulator = options.regulator || 100, //调速器，改变regulator的数值可以调节数字改变的速度
step = isJust ? finalNum / (time / regulator) : maxNum / (time / regulator),/*每30ms增加或减少的数值--*/
count = 0, //计数器
initial = 0;
if(isJust) {
let timer = setInterval(function() {
count = count + step;
if(count >= finalNum) {
clearInterval(timer);
count = finalNum;
}
//t未发生改变的话就直接返回
//避免调用text函数，提高DOM性能
var t = Math.floor(count);
if(t == initial) return;
initial = t;
$this.innerHTML = initial;
}, 50);
}else {
let timer = setInterval(function() {
maxNum = maxNum - step;
if(maxNum <= finalNum) {
clearInterval(timer);
maxNum = finalNum;
}
//t未发生改变的话就直接返回
//避免调用text函数，提高DOM性能
var t = Math.floor(maxNum);
$this.innerHTML = t;
}, 50);
}
},
3.调用
let count1 = 1, count2 = 1000, count3 = 5000, count4 = 80;
this.NumAutoPlusAnimation("count-number1", {
time: 1500,
num: count1,
regulator: 50,
max:30
},false)
this.NumAutoPlusAnimation("count-number2", {
time: 1500,
num: count2,
regulator: 50
})
this.NumAutoPlusAnimation("count-number3", {
time: 1500,
num: count3,
regulator: 50
})
this.NumAutoPlusAnimation("count-number4", {
time: 1500,
num: count4,
regulator: 50
})
