Блог

Главная - Вопросы по программированию - Как создать модифицированную анимацию счетчика в JavaScript?

Как создать модифицированную анимацию счетчика в JavaScript?

#javascript #html #counter

#javascript #HTML #счетчик

Вопрос:

Мне нужно создать веб-страницу, на которой отображаются две кнопки: «Пуск» и «Стоп». При нажатии кнопки «Пуск» мне нужно отображать уравнение каждую секунду. Например:

Предположим, что начальное число равно 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. Счетчик работает. Но кнопка остановки не работает? Это то, с чем вам нужна помощь?

2. Счетчик работает, но там я не знаю, как отображать уравнения по мере увеличения счетчика

3. Новая строка уравнения каждую секунду, которую она передает, или обновление текущего уравнения, которое она передает?

4. Текущее уравнение должно обновляться каждую секунду на 1

Ответ №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>
Метки: