数字滚动原生js的三种方式

Dear 丶 2022-04-12 20:57 351阅读 0赞

让数字滚动的效果简单用计时器setInterval就能轻易的实现,例如

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
    </head>  
    <body>  
        <h1 id="numBox" ></h1>  
    </body>  
    <script type="text/javascript">  
        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>  
</html>

对于setInterval的缺点要从浏览器的的进程说起了, 可以查看: 从浏览器多进程到JS单线程，JS运行机制

对于setInterval和setTimeout对浏览器的影响, 还可以查看:  js中setTimeout和setInterval性能详解

对于setInterval的缺点,所以要用setTimeout来模拟setInterval

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
    </head>  
    <body>  
        <h1 id="numId"></h1>  
    </body>  
    <script type="text/javascript">  
        /\*\*  
         \* 数字滚动  
         \* @param \{Object\} num  
         \* @param \{Object\} maxNum  
         \*/  
        function numRunFun(num, maxNum) \{          
            var num = num;  
            var maxNum = maxNum;  
            var numId = document.getElementById("numId");  
            // 利用setTimeout模拟Interval  
            function numSlideFun()\{  
                num++; // 调节速度 可以小数  
                if(num >= maxNum)\{  
                    numId.innerHTML = maxNum;  
                    return;  
                \}else\{  
                    numId.innerHTML = ~~(num);  
                    setTimeout(function()\{    // 利用setTimeout模拟setInterval                  
                        return numRun();  
                    \},100);// 也可以调节速度                  
                \}  
            \}  
            numSlideFun();  
        \}  
        // 运行  
        numRunFun(0, 10);  
    </script>  
</html>

对于H5有了新的解决方案 window.requestAnimationFrame() 方法,为js动画的首选

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
    </head>  
    <body>  
        <h1 id="num" ></h1>  
    </body>  
    <script type="text/javascript">  
        var numBox = document.getElementById('num');  
        /\*\*  
         \* 数字滚动  
         \* @param \{Object\} num         开始值  
         \* @param \{Object\} maxNum    最大值,最终展示的值  
         \*/  
        function numRunFun(num,maxNum)\{  
            var numText = num;  
            var golb; // 为了清除requestAnimationFrame  
            function numSlideFun()\{  
                numText+=1; // 速度的计算可以为小数  
                if(numText >= maxNum)\{  
                    numText = maxNum;      
                    cancelAnimationFrame(golb);  
                \}else \{  
                    golb = requestAnimationFrame(numSlideFun);  
                \}  
                numBox.innerHTML = ~~(numText)  
                  
            \}  
            numSlideFun();  
        \}  
        // 运行  
        numRunFun(0,10)  
    </script>  
</html>

原文：[https://blog.csdn.net/jason\_renyu/article/details/79283665][https_blog.csdn.net_jason_renyu_article_details_79283665]

[https_blog.csdn.net_jason_renyu_article_details_79283665]: https://blog.csdn.net/jason_renyu/article/details/79283665