我的计数器编号动画无法正常工作？

Question

我使用Math.random() 使用随机数创建了计数器编号功能。我已经制作了如下代码，但仍有一些事情不能很好地工作。我有几个号码，例如2001.9 和1500。问题是，当动画运行其他数字时，但在数字1.9 中，动画不起作用。还有，速度能不能再慢一点？

我创建的代码中的缺失或错误在哪里？

// function for count statistic
function countNumber() {

$('.count').each(function() {

var countTo = Number($(this).text())

$(this).prop('Counter', 0).animate({
     Counter: countTo - 1
}, {
     duration: 2000,
     easing: 'swing',
     step: function(now) {
     var ceil = Math.floor(Math.random() * Math.floor(now))
         if (ceil < countTo) {
         $(this).text(ceil);
     }
     },
     complete: function() {
         $(this).text(countTo);
     }
  });
 });
}

$(document).ready(function() {
  countNumber();
});

#countAnimation {
  display: flex;
  justify-content: space-between;
  margin-bottom:200px;
}

.box-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #cacaca;
  color: #0f0f0f;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
  font-size: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="countAnimation">
  <div class="box-counter">
    <div class="count">200</div>
  </div>
  <div class="box-counter">
    <div class="count">1.9</div>
  </div>
  <div class="box-counter">
    <div class="count">1500</div>
  </div>
</div>

Answer 1

代码运行正常。首先，您可以通过更改 {duration: 5000,} 来更改计数器速度，每 1000 为 1 秒。其次，1.9的值不能和1500的动画速度相等。这就是为什么它在动画快完成时运行的原因。尝试将值更改为更大的数字。 如果这能解决您的问题，请告诉我。

// function for count statistic
function countNumber() {

$('.count').each(function() {

var countTo = Number($(this).text())

$(this).prop('Counter', 0).animate({
     Counter: countTo - 1
}, {
     duration: 5000,
     easing: 'swing',
     step: function(now) {
     var ceil = Math.floor(Math.random() * Math.floor(now))
         if (ceil < countTo) {
         $(this).text(ceil);
     }
     },
     complete: function() {
         $(this).text(countTo);
     }
  });
 });
}

$(document).ready(function() {
  countNumber();
});

#countAnimation {
  display: flex;
  justify-content: space-between;
  margin-bottom:200px;
}

.box-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #cacaca;
  color: #0f0f0f;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
  font-size: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="countAnimation">
  <div class="box-counter">
    <div class="count">200</div>
  </div>
  <div class="box-counter">
    <div class="count">1.9</div>
  </div>
  <div class="box-counter">
    <div class="count">1500</div>
  </div>
</div>

Answer 2

问题在于您已将每个动画从0 设置为countTo - 1。对于1.9，这意味着它将缓慢地从0 过渡到0.9，并且在每一步中，您将一个随机数乘以0 和0.9 之间的下限数：

var ceil = Math.floor(Math.random() * Math.floor(now))

永远是0。然后，将此 0 设置为文本的值（如果它较低）（它始终是，因为它始终为 0）。

if (ceil < countTo) {
  $(this).text(ceil);
}

当您设置ceil 变量时，您最好的办法可能是不设置now。

如果您担心生成的数字中有大量额外的数字，也许可以尝试在 if 条件之后使用 .toFixed()：

https://www.w3schools.com/jsref/jsref_tofixed.asp

将您的步进函数更改为：

 step: function(now) {
   
     var ceil = Math.random() * now;

     if (ceil < countTo) {
        ceil = ceil.toFixed(1);
        $(this).text(ceil);
     }
 },