为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

森林海 2023-08-24 21:02:19
我需要创建一个显示两个按钮的网页:“开始”和“停止”。单击“开始”时,我需要每秒显示一个方程。例如:假设起始数字为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>任何帮助将不胜感激!
查看完整描述

1 回答

?
慕森王

TA贡献1777条经验 获得超3个赞

使用下面的代码尝试一下。这就是您要找的吗?


  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>


查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 93 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信