javascript - Javascript 动画计数器不够具体

Question

所以我正在制作一个效果很好的计数器，只是不够具体：

<div class="sosm youtube">
            <h3 class="names">Youtube</h3>
            <h3 class="number" fame="60000">0000</h3>
        </div>
        <div class="sosm twitter">
            <h3 class="names">Twitter</h3>
            <h3 class="number" fame="30000">0000</h3>
        </div>
        <div class="sosm facebook">
            <h3 class="names">Facebook</h3>
            <h3 class="number" fame="50000">0000</h3>
        </div>
        <div class="sosm likedin">
          <h3 class="names">Linkedin</h3>  
          <h3 class="number" fame="1000">0000</h3>
        </div>

这是我使用的javascript代码：

const number = document.querySelectorAll('.number')
const speed =300

number.forEach(data => {
   const fame = data.getAttribute('fame')
   const speedc = fame/speed
   const increment = () =>{
       let display = +data.textContent

       if(display < fame){
            data.innerHTML = Math.ceil(display + speedc)
            console.log(display)
            setTimeout(increment, 1)
       }else{
           display = display
       }

   }
   increment()
})

当我运行这个动画计数器时，最终数字应该与“名望”属性相匹配。虽然大多数数字匹配但有些不匹配，但我如何使其更具体？

谢谢！

标签： javascriptmath