用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 (将#修改为@）