如何在 JavaScript 中制作修改后的计数器动画？

Question

我需要创建一个显示两个按钮的网页：“开始”和“停止”。单击“开始”时，我需要每秒显示一个方程式。例如：

假设起始数是100，那么在动画中，网页首先会显示：

100 + 1 = 101

然后之后的每一秒，它应该显示：

100 + 2 = 102; 
100 + 3 = 103;
100 + 4 = 104;

依此类推...每 1 秒一次。

我已经能够创建计数器动画，但是，我不知道如何在这之后取得进展。

这是我目前的代码

<html>
<head>
  <script>

  var counter = 100;
  var counterSchedule;

  function startCounterAnimation(){

    counterSchedule = setInterval(showCounter, 1000);
  }

  function showCounter(){

    counter = counter + 1;

    var counterSpan = document.getElementById("counter");
    counterSpan.innerHTML = counter;
  }

  function stopCounterAnimation(){

    clearInterval(counterSchedule);
  }

  </script>
</head>
<body>

  <button onClick="startCounterAnimation()">Start Animation</button>
  <button onClick="stopCounterAnimation()">Stop Animation</button>

  <br /><br />

  <span id="counter"></span>
</body>
</html>

如有任何帮助，我们将不胜感激！

Answer 1

试试下面的代码。这就是您要找的吗？

  var counter = 100;
  var counterSchedule;
  let i = 1;

  function startCounterAnimation(){

    counterSchedule = setInterval(showCounter, 1000);
  }

  function showCounter(){

    counter = counter + 1;
    var counterSpan = document.getElementById("counter");
    counterSpan.innerHTML = `100 + ${i} = ${counter}`;
    i++;
  }

  function stopCounterAnimation(){

    clearInterval(counterSchedule);
  }

<html>
<head>
</head>
<body>
  <button onClick="startCounterAnimation()">Start Animation</button>
  <button onClick="stopCounterAnimation()">Stop Animation</button>

  <br /><br />

  <span id="counter"></span>
</body>
</html>

如何在 JavaScript 中制作修改后的计数器动画？

How to make a modified counter animation in JavaScript?

html

javascript

counter