javascript - 在 html 页面中自定义计数器

Question

下面是html建立计数器的例子(来源于网络)

JS

$(document).ready(function() {
      var positionFromTop = 100; 
        $(window).scroll(function() {
          var $y = $(window).scrollTop();
          if ($y >= positionFromTop) {
             var i;
             for (i = 0; i <= 5400; i += 100) { 
                setTimeout(Counter_Fn(i), 3000);
            }
        }
    });
    });

    function Counter_Fn(x) {
        document.getElementById("Counter_1").innerHTML = x;
    }

body {
  background-color: #F46A6A;
  color: #fff;
  max-width: 800px;
  margin: 1000px auto 0;
  text-align: center;
  display: table;
}

.counter {
  display: table-cell;
  margin: 1.5%;
  font-size: 50px;
  background-color: #FF6F6F;
  width: 200px;
  border-radius: 50%;
  height: 200px;
  vertical-align: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id = "Counter_1" class="counter">0</div>

虽然这是我的基本目的，但我想添加更多细节如下

1. 我希望当我向下滚动到特定点时(一旦加载页面)计数器应该开始。在当前示例中，计数器在页面加载时才开始，不会等我到达下面的位置
2. 增量应该是 100 而不是 1
3. 我还想在 1,000 之后使用逗号分隔符

任何实现上述功能的指针都将受到高度赞赏

Answer 1

1) 要在用户向下滚动到页面中的某个点时运行一些代码，您应该将代码放在一个函数中，然后在 $(document).ready() 中，您应该使用:

$(document).ready(function() {
  var positionFromTop = 1234; // for example
  $(window).scroll(function() {
    var $y = $(window).scrollTop();
    if ($y >= position) {
      callyourFunctionToCount();
    }
  });
}

2) 要使用与 1 不同的步骤，您不能使用 animate()。您应该使用某种定时计数器，就像描​​述得很好一样here ， 例如。 https://stackoverflow.com/a/2540673/709439 .

3) 与第 2 点相同:使用计数器可以轻松设置增量值和输出格式。