用 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>



真诚赞赏，手留余香

微信支付