javascript - javascript 中的数字动画不起作用？

Question

下面有 2 个函数 - myCalculator() 函数保存具有静态值的变量，animateValue() 函数将从 var 开始到结束为该值设置动画。(在 1st func 中定义了 var。) 但问题是该值没有动画

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

<div class="container">  
  <form id="contact" action="" method="post">
    <h3>ROI Calculator</h3>
    <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>
      <font class="label">Average Order Size($) </font> <input placeholder="" type="text" id="avg-order-size" style="width:110px;float: right;"/>
    </fieldset>
    <fieldset>
      <font class="label">What percentage of the saved reps will recruit 1 person that month?(%) </font> <input placeholder="10" type="text" id="mem-retain-per-month" onCopy="return false" onPaste="return false" autocomplete=off min="1" max="100" style="width:110px;float: right;"  />
    </fieldset>
    <fieldset>
      <button name="submit" type="button" id="contact-submit" onclick="myFunction();">Clear</button>
      <button name="submit" type="button" id="contact-submit" onclick="myCalculator();" style="float: right;">Calculate</button>
    </fieldset>

   </form>
   </div>

   <div style="margin: 0 auto;width: 100%;">

   <div class="container2" style="display:none;">
   <div id="contact" class="contact2">

   <fieldset>
     <font class="label"> Cumulative Retention Revenue After 12 Months = </font>  

     <span id="value" ></span>
     <div ></div>
    </fieldset>


   </div>
   </div>
   </div>
   <script>
function myFunction() {
    document.getElementById("contact").reset();
}

function myCalculator() {

    var actMem = document.getElementById("active-member").value;
    var avgOrd = document.getElementById("avg-order-size").value;
    var menRetainPM = document.getElementById("mem-retain-per-month").value;


    if(actMem >=1 && actMem<=1000000 && actMem != NaN) { }
    else {  alert("Active member between 1 to 1000000!");exit; }
    if(avgOrd >=1 && avgOrd<=1000 && avgOrd != NaN) { }
    else {  alert("Average order size between 1 to 1000!");exit; }
    if(menRetainPM<=100 && menRetainPM != NaN) {

    } 
    else {  alert("% value between 1 to 100!");exit; }
    if(menRetainPM == '') {
        menRetainPM = 10;
    }


    $(".container2").show();
    var start = 1;
    var end = 100
}
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);
}
animateValue("value", start, end, 2000);
</script>

值没有从第一个函数传递到第二个函数。 提前致谢。

Answer 1

当您调用animateValue("value", start, end, 2000);时，start和end都是未定义的。从 myCalculator 内部调用该函数，它们都是在其中定义的:

function myCalculator() {
    var start = 1; 
    var end = 100;
    animateValue("value", start, end, 2000);
}

您还需要在某处调用myCalculator();。