더북(TheBook)

텍스트 삭제 효과 구현하기

텍스트 삭제는 입력 과정과 비슷합니다. 텍스트를 입력할 때는 배열의 앞에서부터 요소를 추출해 한 글자씩 출력했는데, 텍스트를 삭제할 때는 뒤에서부터 요소를 추출해 한 글자씩 줄어드는 것처럼 표현하면 됩니다. 이런 텍스트 삭제 효과를 구현한 코드는 다음과 같습니다.

13/end/js/text.js

function deleteTxt(){
  currentTxt.pop(); // ①
  spanEl.textContent = currentTxt.join("");// ②
  if(currentTxt.length !== 0){ // ③
    setTimeout(deleteTxt, Math.floor(Math.random() * 100));
  }else{ // ④
    index = (index + 1) % txtArr.length;
    currentTxt = txtArr[index].split("");
    writeTxt();
  }
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.