переместить текст вниз, используя css и setInterval - PullRequest
Новая
       0

переместить текст вниз, используя css и setInterval

0 голосов
/ 18 февраля 2020

используя CSS и setinterval, мне нужно переместить текст вниз кнопкой «Пуск». Предположим, есть текстовое поле, и когда я нажимаю кнопку «Пуск», текст должен двигаться вниз, а когда я нажимаю кнопку «Стоп», он должен остановить движение текста. 

<style>
.class1{ 
    position: relative; 
    padding-top: 10px; 
}
<body> 
    <p input id="para">Paragraph</p> 
    <button id="srt" onclick="start()" >Start</button> 
    <button id="stp" onclick="stop()">Stop</button>
    <script> 
        var i=document.getElementById("para"); 
        setInterval(function start(){ 
            i.className="class1"; 
        },1000) 
    </script> 
</body>

1 Ответ

0 голосов
/ 19 февраля 2020

Вот грубое решение, которое использует setInterval и CSS для создания анимации: 

let intervalId;

const increaseMarginTop = () => {
  const el = document.querySelector('#targetEl');
  const currentMarginTop = Number(el.style.marginTop.substring(0, el.style.marginTop.length - 2)) + 1;

  el.style.marginTop = `${currentMarginTop}px`;
};

document.addEventListener('click', e => {
  if (e.target.tagName === 'BUTTON') {
    if (e.target.id === 'stp') {
      intervalId = clearInterval(intervalId);
    } else if (e.target.id === 'srt') {
      if (!intervalId) {
        intervalId = setInterval(increaseMarginTop, 10);
      }
    }
  }
});
<button id="srt">Start</button>
<button id="stp">Stop</button>

<div id="targetEl">This will move down</div>

Просто к сведению - в современных JavaScript.

есть лучшие способы создания анимации.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...