如何解决用Bootstrap制作的计数器只会运行一次,并且仅在刷新页面时才会重置
您能帮我吗?因此,当我尝试滚动到页面的该部分之后尝试使计数器重新开始时遇到了一个问题。我首先尝试在CSS和JavaScript(具有DOM样式)中使用动画迭代计数,但是那根本行不通。
这是HTML:
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 col1">
<i class="far fa-smile-beam"></i>
<div class="counter-description">
<div class="pl-4 counter" data-target="3800">0</div>
<h5 class="pl-4">Happy People</h5>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 col1">
<i class="far fa-calendar-alt"></i>
<div class="counter-description">
<div class="pl-4 counter" data-target="5900">0</div>
<h5 class="pl-4">Days with you</h5>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 col1">
<i class="fas fa-dolly"></i>
<div class="counter-description">
<div class="pl-4 counter" data-target="2200">0</div>
<h5 class="pl-4">New Equipment</h5>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 col1">
<i class="far fa-grimace"></i>
<div class="counter-description">
<div class="pl-4 counter" data-target="3800">0</div>
<h5 class="pl-4">Clean Teeth</h5>
</div>
</div>
</div>
这是JavaScript部分:
const counters = document.querySelectorAll('.counter');
const speed = 200;
counters.forEach(counter => {
const updateCount = () => {
const target = +counter.getAttribute('data-target');
const count = +counter.innerText;
const inc = target / speed;
if(count < target) {
counter.innerText = count + inc;
requestAnimationFrame(updateCount,1);
} else {
count.innerText = target;
}
}
updateCount();
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。