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

下面有两个函数-myCalculator（）函数用于保存具有静态值的变量，animateValue（）函数将从

变量开始到结束设置该值的动画（在第1个函数中定义了变量）。但问题是该值在表单按钮单击时没有设置动画

<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>


你想每月储蓄多少人？
算计
动画值
函数myCalculator（）{
$（“.container2”）.show（）；
var启动=1000；
var端=23600191；
animateValue（“值”，开始，结束，1000）；
}
函数animateValue（id、开始、结束、持续时间）{
var范围=结束-开始；
无功电流=启动；
var增量=结束>开始？1:-1；
var stepTime=数学绝对值（数学下限（持续时间/范围））；
var obj=document.getElementById（id）；
var timer=setInterval（函数（）{
电流+=增量；
obj.innerHTML=当前；
如果（当前==结束）{
清除间隔（计时器）；
}
}，步进时间）；
}

注意：

animateValue函数未采用var start和end的值
2000是2秒
myCalculate函数用于计算某些值
animateValue函数将设置值的动画
问题似乎是因为这样一个事实：如果除了1之外还有一个增量值，那么如果
增量
没有划分
范围
，则会超出
结束
，循环永远不会停止。因此，如果将增量值设置为2，则以下操作将不起作用

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

因为在这种情况下，2不划分
范围
ie 1999，但下面的方法可行

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

因为范围是2000，可以被
increment
整除。看到这把小提琴了吗

要解决此问题，您可以更改循环退出条件，以检查在调用
animateValue
时，
start
和
end
参数是否未指定任何值，以确定增量和
current的正值是否为
end
。当我给它添加任何值时，它工作得很好。检查这个fiddle@Varun scenerio在这里是不同的，我需要使用从myCalculate（）到animateValue（）的开始/结束变量值，而不是使用静态值为什么不从
myCalculate
函数本身调用
animateValue
函数呢。或者发布更多的代码来解释您的场景到底是什么。@Varun最后我发现了问题，代码运行良好，但当我们将
var increment
值从1更改为任意数字时，它将不起作用。它将动画延续到无穷大。设置
var增量
值非常重要这把小提琴检查
var增量
值并尝试更改它，然后查看..是的，这可能是答案，但我无法更改循环退出条件。你能做吗？小提琴。检查答案中的链接我已经检查了你的提琴，但是你能用主要问题更新你的提琴吗？@Jasbir已经更新了提琴-。如果它解决了问题，请将其标记为已接受答案。您可以看到我最初提出的问题吗。？