Javascript JS计数器递减，这不应该发生

以下是计数器的代码。问题是它第一次运行时是正确的，但每隔一次我按下按钮，计数就会递减。比如第一次100，第二次45，第三次12等等

我已经在最后将变量的所有值设置为0，但它仍然以相同的方式运行任何解决方案

<div>
    <button onclick="runAnimations()">Clients counter</button>
</h2>
<div class="panel">
    <ul>
        <li>
            <span data-count="250" class="countup">250</span>+

</li>
        <li>
            <span data-count="500" class="countup">500</span>+

    </li>
        <li>
            <span data-count="100" class="countup">100</span>+
    
    
</li>
    </ul>
</div>




    // How long you want the animation to take, in ms

const animationDuration = 2000;

// Calculate how long each ‘frame’ should last if we want to update the animation 60 times per second

const frameDuration = 1000 / 60;

// Use that to calculate how many frames we need to complete the animation

const totalFrames = Math.round( animationDuration / frameDuration );

// An ease-out function that slows the count as it progresses

const easeOutQuad = t => t * ( 2 - t );

// The animation function, which takes an Element

const animateCountUp = el => {

  let frame = 0;

  const countTo = parseInt( el.innerHTML, 10 );

  // Start the animation running 60 times per second

  const counter = setInterval( () => {

    frame++;

    // Calculate our progress as a value between 0 and 1

    // Pass that value to our easing function to get our

    // progress on a curve

    const progress = easeOutQuad( frame / totalFrames );

    // Use the progress value to calculate the current count

    const currentCount = Math.round( countTo * progress );

    // If the current count has changed, update the element

    if ( parseInt( el.innerHTML, 10 ) !== currentCount ) {

      el.innerHTML = currentCount;

    }

    // If we’ve reached our last frame, stop the animation

    if ( frame === totalFrames ) {

      clearInterval( counter );

    }

  }, frameDuration );

};

// Run the animation on all elements with a class of ‘countup’

const runAnimations = () => {

const countupEls = document.querySelectorAll( '.countup' );

countupEls.forEach( animateCountUp );

animationDuration = 0;
frameDuration = 0;
totalFrames = 0;
easeOutQuad = 0;
animateCountUp = 0;
countTo = 0;
progress = 0;
runAnimations = 0;
currentCount = 0;
frame = 0;
countupEls = 0;

}; 

客户柜台


250+


500+


100+


//希望动画持续多长时间，以毫秒为单位
const animationDuration=2000；
//如果要每秒更新动画60次，请计算每个“帧”应持续多长时间
const frameDuration=1000/60；
//使用它来计算完成动画需要多少帧
const totalFrames=Math.round（animationDuration/frameDuration）；
//一种缓解功能，可在计数过程中降低计数速度
常数easeOutQuad=t=>t*（2-t）；
//动画函数，它接受一个元素
常量animateCountUp=el=>{
设frame=0；
const countTo=parseInt（el.innerHTML，10）；
//启动动画，每秒运行60次
常量计数器=设置间隔（（）=>{
frame++；
//将进度计算为0到1之间的值
//将该值传递给我们的缓和函数，以获得
//曲线上的进展
const progress=easeOutQuad（帧/总帧）；
//使用进度值计算当前计数
const currentCount=数学轮（countTo*进度）；
//如果当前计数已更改，请更新元素
if（parseInt（el.innerHTML，10）！==currentCount）{
el.innerHTML=当前计数；
}
//如果已到达最后一帧，请停止动画
如果（帧===总帧）{
清除间隔（计数器）；
}
}，帧时长）；
};
//使用“倒计时”类在所有元素上运行动画
常量runAnimations=（）=>{
const countupEls=document.queryselectoral（'.countup'）；
countupEls.forEach（animatecocountup）；
animationDuration=0；
帧持续时间=0；
totalFrames=0；
easeOutQuad=0；
animateCountUp=0；
countTo=0；
进度=0；
runAnimations=0；
currentCount=0；
帧=0；
countupEls=0；
}; 

首先，将这些值设置为

0

不是一个好主意，尤其是因为它们中的大多数都是

const

，所以不可能。我认为代码的问题在于，

runAnimations

函数在同一个元素上调用得太早，而且由于您选择元素的当前文本作为计数器的结束号，如果动画当前正在为该元素运行，那么它只会为第二次运行选择一个较低的数字，因为此时

innerHTML

就是这样。为了确保不会发生这种情况，最好将数字存储为数据属性，如

，并且与元素的

innerHTML

不同，它不会改变，因此您可以确保您的代码在每次运行时使用正确的值。

按照上面所说的方法解决问题

<div data-count="100" class="countup"></div>

const countTo = parseInt( el.getAttribute('data-count'), 10 );

const countTo=parseInt（el.getAttribute（'data-count'），10）；

请将html元素添加到您的问题和/或添加一个工作snippit。好的，我已经添加了如果答案解决了问题，您可以接受它作为答案吗？好的，如何为此编辑js？

const countTo=parseInt（el.getAttribute（'data-count'），10）谢谢兄弟，现在它工作正常了。我在手风琴上加了它。你是职业选手