在 html 页面中自定义计数器

Bogaso 发表于 Dev

博加索

以下是在 html 中建立计数器的示例（来自互联网）。

$(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>

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

当我向下滚动到特定点（加载页面后）时，我希望计数器应该启动。在当前示例中，计数器仅在页面加载时启动，而不是等到我到达其下方位置时才开始
增量应该是 100 而不是 1
我也想在 1,000 之后有逗号分隔符

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

马可斯

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(). 例如，您应该使用某种定时计数器，就像这里描述的那样。https://stackoverflow.com/a/2540673/709439。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。