Npcink Blog
切换菜单

数字滚动原生 js 的三种方式 - JS 笔记

JS 实现的数字滚动方式

最后更新于
本页目录3 节

控制好数字的滚动速度，更能给人以震撼和耳目一新的感觉。推荐使用最后一个方法。

原文来源：详情

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

原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。

<h2 id="numBox" ></h2>
  <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, 666);
  </script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <h2 id="numBox" ></h2>
  </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 的缺点要从浏览器的的进程说起了
  • 对于 setInterval 和 setTimeout 对浏览器的影响

优化一

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

演示

原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。

<h2 id="numId"></h2>
  <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 numSlideFun();
          },100);// 也可以调节速度
        }
      }
      numSlideFun();
    }
    // 运行
    numRunFun(0, 888);
  </script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <h2 id="numId"></h2>
  </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 numSlideFun();
          },100);// 也可以调节速度
        }
      }
      numSlideFun();
    }
    // 运行
    numRunFun(0, 10);
  </script>
</html>

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

优化二（推荐）

演示：

原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。

<h2 id="num" ></h2>
  <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,999)
  </script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <h2 id="num" ></h2>
  </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>