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

1
<h2 id="numBox" ></h2>
2
  <script type="text/javascript">
3
    function numRunFun(num, maxNum){
4
      var numBox = document.getElementById("numBox");
5
      var num = num;
6
      var maxNum = maxNum;
7
      var timer = setInterval(function(){
8
        num++; // 调节速度
9
        if(num >= maxNum){
10
          numBox.innerHTML = maxNum;
11
          clearInterval(timer);
12
        } else {
13
          numBox.innerHTML = ~~(num);
14
        }
15
      },100); // 也可以调节速度
16
    }
17

18
    // 运行
19
     numRunFun(0, 666);
20
  </script>

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="UTF-8">
5
    <title></title>
6
  </head>
7
  <body>
8
    <h2 id="numBox" ></h2>
9
  </body>
10
  <script type="text/javascript">
11
    function numRunFun(num, maxNum){
12
      var numBox = document.getElementById("numBox");
13
      var num = num;
14
      var maxNum = maxNum;
15
      var timer = setInterval(function(){
16
        num++; // 调节速度
17
        if(num >= maxNum){
18
          numBox.innerHTML = maxNum;
19
          clearInterval(timer);
20
        } else {
21
          numBox.innerHTML = ~~(num);
22
        }
23
      },100); // 也可以调节速度
24
    }
25

26
    // 运行
27
     numRunFun(0, 10);
28
  </script>
29
</html>

1
<h2 id="numId"></h2>
2
  <script type="text/javascript">
3
    /**
4
     * 数字滚动
5
     * @param {Object} num
6
     * @param {Object} maxNum
7
     */
8
    function numRunFun(num, maxNum) {
9
      var num = num;
10
      var maxNum = maxNum;
11
      var numId = document.getElementById("numId");
12
      // 利用setTimeout模拟Interval
13
      function numSlideFun(){
14
        num++; // 调节速度 可以小数
15
        if(num >= maxNum){
16
          numId.innerHTML = maxNum;
17
          return;
18
        }else{
19
          numId.innerHTML = ~~(num);
20
          setTimeout(function(){  // 利用setTimeout模拟setInterval
21
            return numSlideFun();
22
          },100);// 也可以调节速度
23
        }
24
      }
25
      numSlideFun();
26
    }
27
    // 运行
28
    numRunFun(0, 888);
29
  </script>

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="UTF-8">
5
    <title></title>
6
  </head>
7
  <body>
8
    <h2 id="numId"></h2>
9
  </body>
10
  <script type="text/javascript">
11
    /**
12
     * 数字滚动
13
     * @param {Object} num
14
     * @param {Object} maxNum
15
     */
16
    function numRunFun(num, maxNum) {
17
      var num = num;
18
      var maxNum = maxNum;
19
      var numId = document.getElementById("numId");
20
      // 利用setTimeout模拟Interval
21
      function numSlideFun(){
22
        num++; // 调节速度 可以小数
23
        if(num >= maxNum){
24
          numId.innerHTML = maxNum;
25
          return;
26
        }else{
27
          numId.innerHTML = ~~(num);
28
          setTimeout(function(){  // 利用setTimeout模拟setInterval
29
            return numSlideFun();
30
          },100);// 也可以调节速度
31
        }
32
      }
33
      numSlideFun();
34
    }
35
    // 运行
36
    numRunFun(0, 10);
37
  </script>
38
</html>

1
<h2 id="num" ></h2>
2
  <script type="text/javascript">
3
    var numBox = document.getElementById('num');
4
    /**
5
     * 数字滚动
6
     * @param {Object} num     开始值
7
     * @param {Object} maxNum  最大值,最终展示的值
8
     */
9
    function numRunFun(num,maxNum){
10
      var numText = num;
11
      var golb; // 为了清除requestAnimationFrame
12
      function numSlideFun(){
13
        numText+=1; // 速度的计算可以为小数
14
        if(numText >= maxNum){
15
          numText = maxNum;
16
          cancelAnimationFrame(golb);
17
        }else {
18
          golb = requestAnimationFrame(numSlideFun);
19
        }
20
        numBox.innerHTML = ~~(numText)
21

22
      }
23
      numSlideFun();
24
    }
25
    // 运行
26
    numRunFun(0,999)
27
  </script>

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="UTF-8">
5
    <title></title>
6
  </head>
7
  <body>
8
    <h2 id="num" ></h2>
9
  </body>
10
  <script type="text/javascript">
11
    var numBox = document.getElementById('num');
12
    /**
13
     * 数字滚动
14
     * @param {Object} num     开始值
15
     * @param {Object} maxNum  最大值,最终展示的值
16
     */
17
    function numRunFun(num,maxNum){
18
      var numText = num;
19
      var golb; // 为了清除requestAnimationFrame
20
      function numSlideFun(){
21
        numText+=1; // 速度的计算可以为小数
22
        if(numText >= maxNum){
23
          numText = maxNum;
24
          cancelAnimationFrame(golb);
25
        }else {
26
          golb = requestAnimationFrame(numSlideFun);
27
        }
28
        numBox.innerHTML = ~~(numText)
29

30
      }
31
      numSlideFun();
32
    }
33
    // 运行
34
    numRunFun(0,10)
35
  </script>
36
</html>