JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<button type="button" id="btnStart">시작</button>

<div id="container">

  <div id="fish">물고기</div>

</div>

CSS

#container{position:relative;padding:20px;}
#container #fish{position:relative;width:70px;height:30px;border:2px solid red;text-align:center}

JavaScript

var fishEle = document.getElementById('fish');
var btnStartEle = document.getElementById('btnStart');

// #fish의 left위치 초기 값
var leftPos = 0;
// setInterval가 할당될 변수
var timerID = 0;

// 애니메이션 함수
function animateFish() {
  // timerID에 setInterval(0.02초마다 실행)을 할당
  timerID = setInterval(function() {
    // leftPos의 값을 1씩 증가 
    leftPos++;
    // #fish의 left 값을 적용
    fishEle.style.left = leftPos + 'px';
    
    // 조건문 - leftPos의 값이 430이상이 되는 경우 중단
    if (leftPos >= 430) {
      clearInterval(timerID);
      timerID = 0;
    }
  }, 20);
}

btnStartEle.addEventListener('click', animateFish, false);