1️⃣ 목표

• 특정글자를 마우스로 클릭하면 일정시간 마다 랜덤하게 색이 변하는 기능구현하기

2️⃣ 이용할 메소드

1. addEventListener(): 이벤트를 받아오는 메소드
2. setInterval(): 일정시간(두번째 인자)마다 함수(첫번째 인자)를 호출하는 함수
3. clearInterval(): setInterval()의 반환값을 받아 해당 기능을 정지시킴

3️⃣ 사용1

(1) 코드구현

const aa = document.querySelector(".hello");
let key = null;

function randomColor() {
  aa.style.color = "#" + parseInt(Math.random() * 0xffffff).toString(16);
}

function clickMouseFunc() {
  if (key === null) {
    key = setInterval(randomColor, 300);
  } else {
    clearInterval(key);
    key = null;
  }
}
aa.addEventListener("click", clickMouseFunc);

• 특정 글자를 클릭을 하면 일정시간동안 글자색이 바뀌는 기능을 키고 끌 수 있습니다.
• setInterval()의 두번째 인자는 1000당 약 1초의 딜레이가 생깁니다.

(2) 결과

[ 전광판 클릭시 “작동” 다시 클릭시 "정지" ]
< delay = 1000 >
RANDOM WORD!
< delay = 400 >
RANDOM WORD!
< delay = 50 >
RANDOM WORD!

3️⃣ 사용2

(1) 자연스럽게 색변환시키기(css)

• 색을 바뀔 때 좀 더 자연스럽게 색을 바뀌는 기능을 추가해보겠습니다.
• css에 그러한 역할을 해주는 transition이라는 요소가 있습니다.
• 다음의 사이트에서 transition의 놀라운 기능들을 확인해볼 수 있습니다.

>>>>>MDN Web Docs - mozilla

.sample {
  transition: color 0.2s ease-in-out;
}

• transition은 위와같이 .2s와 같이 애니매이션의 자동 시간을 조절할 수 있습니다.

(2) 최종 결과물

• delay와 transition의 작동시간의 벨런스를 잘 맞추지 못하면 색이 바뀌기 전에 다른색으로 변합니다.
• 그렇기 때문에 두 값의 벨런스를 잘 맞추는 것이 중요합니다.
  
  [ 전광판 클릭시 “작동” 다시 클릭시 "정지" ]
  < delay = 400 >
  RANDOM WORD!
  < delay = 400, transition: .2s>
  RANDOM WORD!
  < delay = 1500, transition: .9s >
  RANDOM WORD!
  < delay = 100, transition: .1s >
  RANDOM WORD!
  < delay = 100 >
  RANDOM WORD!