JavaScript setInterval

setInterval 텍스트 추가

 HTML

    <div class="test"></div>

    <button class="btn">시작하기</button>

 

JavaScript

const btn = document.querySelector(".btn");

function text() {

  document.querySelector(".test").innerText += "안녕!";

}

let textAdd;

let toggle = true;

btn.addEventListener("click", function () {

  if (toggle) {

    textAdd = setInterval(text, 1000);

    toggle = false;

    btn.textContent = "멈추기";

  } else {

    clearInterval(textAdd);

    toggle = true;

    btn.textContent = "재시작";

  }

});

 

ON BROWSER(버튼 누르기 전)

시작하기 버튼을 누르면 「안녕!」이 추가되기 시작한다.

ON BROWSER(버튼 누른 후)

멈추기 버튼을 누르면 「안녕!」 추가가 멈춘다.

 

 

 

 

 

setInterval 이미지 로테이션

HTML

    <div class="test">

      <img src="../images/banner/investor1.png" alt="" />

      <img src="../images/banner/investor2.png" alt="" />

      <img src="../images/banner/investor3.png" alt="" />

      <img src="../images/banner/investor4.png" alt="" />

      <img src="../images/banner/investor5.png" alt="" />

      <img src="../images/banner/investor6.png" alt="" />

      <img src="../images/banner/investor7.png" alt="" />

    </div>

    <button class="btn">시작하기</button>

 

SCSS

.test {

  > img {

    position: absolute;

    display: none;

  }

}

.btn {

  position: absolute;

  top: 15%;

}

 

JavaScript

const btn = document.querySelector(".btn");

const images = document.querySelectorAll(".test > img");

function imgRot() {

  let j = parseInt(Math.random() * images.length);

  for (let i = 0; i < images.length; i++) {

    images[i].style.display = "none";

    images[j].style.display = "block";

  }

}

let toggle = true;

let init;

btn.addEventListener("click", function () {

  if (toggle) {

    init = setInterval(imgRot, 200);

    toggle = false;

    btn.textContent = "멈추기";

  } else {

    clearInterval(init);

    toggle = true;

    btn.textContent = "재시작";

  }

});

 

ON BROWSER(버튼 누르기 전)

ON BROWSER(버튼 누른 후)