用 JavaScript 实现数字增加滚动动画
方案一:
<h1 id="numBox"></h1>
<script>
function numRunFun(num, maxNum){
var numBox = document.getElementById("numBox");
var num = num;
var maxNum = maxNum;
var timer = setInterval(function(){
num++;
if(num >= maxNum){
numBox.innerHTML = maxNum;
clearInterval(timer);
} else {
numBox.innerHTML = ~~(num);
}
},100);
}
numRunFun(0, 10);
</script>
方案二:
<h1 id="numBox"></h1>
<script>
function numRunFun(num, maxNum) {
var num = num;
var maxNum = maxNum;
var numId = document.getElementById("numBox");
// 利用setTimeout模拟Interval
function numSlideFun(){
num++; // 调节速度 可以小数
if(num >= maxNum){
numId.innerHTML = maxNum;
return;
}else{
numId.innerHTML = ~~(num);
setTimeout(function(){ // 利用setTimeout模拟setInterval
return numSlideFun();
},100);// 也可以调节速度
}
}
numSlideFun();
}
</script>
方案三:
<h1 id="numBox"></h1>
<script>
var numId = document.getElementById("numBox");
function NumAutoPlusAnimation(startNum, endNum ) {
var step = (endNum - startNum) / 20;//颗粒化可以控制速度
var count = startNum;
var timer = setInterval(() => {
count = count + step;
if (count >= endNum) {
clearInterval(timer);
count = endNum;
}
numId.innerHTML = count.toFixed(2)
}, 30);
}
NumAutoPlusAnimation(0, 26.88);
</script>
声明:本站所有文章和图片,如无特殊说明,均为原创发布,转载请注明出处。