第一步
我想制作一个计数器,当用户加载我的页面时,计数器从0开始,并以其结束值(例如75)结束。因此,我在网上搜索并找到了一个jQuery
代码,将该代码复制并粘贴到我的js文件custom.js
中,并根据需要进行了一些更改。它完美地工作。
以下是我的代码:
HTML
<div class="top_div">
Top Div
</div>
<div class="love_count">75%</div>
<div class="love_count">30%</div>
JS
jQuery(document).ready(function ($) {
function count($this){
var current = parseInt($this.html(), 10);
$this.html(++current + '%');
if(current !== $this.data('count')){
setTimeout(function(){count($this)}, 15);
}
}
$(".love_count").each(function() {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
});
});
第二步
现在我的客户想要当用户滚动到特定的div时,计数器开始计数。因此,我再次在网络上搜索并找到了一些其他代码。但它不起作用。
- 第一个问题:当我滚动到特定的div时,计数器首先显示我的最终值(例如75)。
- 第二个问题:然后它从0开始计数,计数器永远不会停止。 它会增加到千万级别,但永远不会停止。
这是我的代码:
HTML
<div class="top_div">
Top Div
</div>
<div class="love_counter">
<div class="love_count">75%</div>
<div class="love_count">30%</div>
</div>
JS
$(window).scroll(function() {
var hT = $('.love_counter').offset().top,
hH = $('.love_counter').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
function count($this){
var current = parseInt($this.html(), 10);
$this.html(++current + '%');
if(current !== $this.data('count')){
setTimeout(function(){count($this)}, 15);
}
}
$(".love_count").each(function() {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
});
}
});
我的要求
我希望当网站滚动到特定的div时,计数器从0开始并停止在其结束值。但是,当我向上或向下滚动时,计数器不应重新开始,并且仍然停在那里的结束值。
但是,当用户刷新页面并向下滚动到该特定div时,计数器会像往常一样开始,并停止到结束值,并且不会在我向上或向下滚动时重新开始。
我在jQuery方面非常薄弱,请帮助我并指导我。我希望您理解我的问题。