Question

我尝试为基于单个输入值* 4.5计算的输出设置动画。计算本身是有效的，但我无法弄清楚如何设置值的动画，我尝试做的是让输出计数很快达到计算值。我发现https://codepen.io/shivasurya/pen/FatiB有我想要实现的计数动画，但是无法弄清楚如何将它实现到我的输入和输出字段，到目前为止，我有：< / p>

<form id="ewcalc" oninput="updateOutput()"> 
<input name="income" type="number" value="0" />
<output for="income" name="loan">0</output>
</form>

<script type="text/javascript">
function updateOutput() {
var form = document.getElementById("ewcalc");

form.elements["loan"].value=eval(parseInt(form.elements["income"].value) * 4.5);
}
</script>

有关如何实现动画的任何建议吗？我尝试了几件事，其中没有一件是正常的，如果我尝试使用onsubmit就会出错。

Answer 1

您可能希望像这样使用requestAnimationFrame：

＆＃13;

function updateOutput() {
  var income = $("#income").val() * 4.5;
  var output = Number($("#loan").text());

  if (income !== output) {
    if (income > output)
      output += 0.5;
    else if (income < output)
      output -= 0.5;

    $("#loan").text(output);
    requestAnimationFrame(updateOutput);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="ewcalc" oninput="updateOutput()">
  <input id="income" type="number" value="0" />
  <output for="income" id="loan">0</output>
</form>

＆＃13;

基于单个输入字段的动画输出

1 个答案: