下面是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>
虽然这是我的基本目的,但我想添加更多细节如下
- 我希望当我向下滚动到特定点时(一旦加载页面)计数器应该开始。在当前示例中,计数器在页面加载时才开始,不会等我到达下面的位置
- 增量应该是 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()
。您应该使用某种定时计数器,就像描述得很好一样here , 例如。
https://stackoverflow.com/a/2540673/709439 .
3) 与第 2 点相同:使用计数器可以轻松设置增量值和输出格式。
关于javascript - 在 html 页面中自定义计数器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57676580/