javascript - javascript 中整数值类型的动画创建问题？

Question

下面有 2 个函数 - myCalculator() 函数保存具有静态值的变量，animateValue() 函数将从 var start to end 动画化该值。(在第一个函数中定义了 var。)但问题是该值没有在单击表单按钮时设置动画

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form id="contact" action="" method="post">
    <fieldset>
     <font class="label">How many people do you want to save per month? </font>  <input placeholder="" id="active-member" type="text" style="width:110px;float: right;"/>
    </fieldset>
   <fieldset>
    <button name="submit" type="button" id="contact-submit" onclick="myCalculator();" style="float: right;">Calculate</button>
    </fieldset>

   </form>

  <div class="container2" style="display:none;">
   Animating Value <span id="value" ></span>
   </div>

  <script>
  function myCalculator() {

    $(".container2").show();
    var start = 1000;
    var end = 23600191;
    animateValue("value", start, end, 1000);
    }

    function animateValue(id, start, end, duration) {
    var range = end - start;
    var current = start;
    var increment = end > start? 1 : -1;
    var stepTime = Math.abs(Math.floor(duration / range));
    var obj = document.getElementById(id);
    var timer = setInterval(function() {
        current += increment;
        obj.innerHTML = current;
        if (current == end) {
            clearInterval(timer);
        }
     }, stepTime);
      }

    </script>

注意:

1. animateValue 函数未采用 var start and end
的值
2. 2000 是 2 秒
3. myCalculate 函数计算一些值
4. animateValue 函数将为值设置动画

Answer 1

这个问题似乎是因为如果你有一个不同于 1 的增量值，那么如果 increment不划分 range , 你会超过 end并且循环永远不会停止。因此，如果您将增量值设置为 2，则以下内容将不起作用

animateValue("value", 1, 2000, 2000);

因为 2 不除 range即在这种情况下为 1999，但以下将起作用

animateValue("value", 1, 2001, 2000);

因为范围是 2000 并且可以被 increment 整除.看到这个 fiddle https://jsfiddle.net/e1xd4ru1/3/

要解决这个问题，您可以更改循环退出条件以检查是否 current >= end对于增量的正值和 current <= end对于增量的负值。

希望这能回答您的问题。