用 JavaScript 实现数字增加滚动动画

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


声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
765 文章
4 教程
8 项目
随机推荐
MySQL 的 sql_mode 模式介绍:为什么 MySQL 中 int,float,double 类型字段插入空字符时自动转为0
Linux apt 命令
JavaScript window 对象
Debian11 安装笔记1:编译安装Nginx、Naxsi 和 Njs
使用 svg 作为背景图片
JavaScript 基本语法
Linux 中 top 命令的 Load Average 含义
Node.js dns 模块