Question

下面有两个函数 - 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>

注意：

animateValue函数未使用 var start and end
2000是2秒
myCalculate函数计算某些值
animateValue函数将动画化值

Answer 1

问题似乎是因为如果你有一个除1以外的增量值，那么如果increment没有除range，你就会超过end和循环永不停止。因此，如果您将增量值设置为2，则以下内容将不起作用

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

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

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

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

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

希望这能回答你的问题。

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

1 个答案: