数字累加动画

酱酱酱酱将

已于 2022-11-08 20:18:26 修改

阅读量119

点赞数

文章标签： javascript 前端 html

于 2022-11-03 20:51:18 首次发布

本文链接：https://blog.csdn.net/weixin_56815226/article/details/127678078

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <font size="5" id="time">0</font> 
    <script>
        function NumAutoPlusAnimation(targetEleId, options) {
            var numElement = document.getElementById(targetEleId), 
            time = options.time, //总时间--毫秒为单位 
            finalNum = options.finalNum, //最终显示数值 
            regulator = options.regulator, //调速器，改变regulator的数值可以调节数字改变的速度 
            step = finalNum / (time / regulator),/*每30ms增加的数值--*/ 

            count = 0, //计数器 
            initial = 0; 
            var 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;
                numElement.innerHTML = initial; 
            }, 30); 
        } 
        

        NumAutoPlusAnimation("time", { 
            time: 1500, 
            finalNum: 100, 
            regulator: 50 
        })   
    </script>
</body>
</html>