TIL - 자동텍스트 만들기 (JS)

let blinkText = document.querySelector('.typing');
let typingBool = false;
let typingIdx = 0;
let arrIndex = 0;
let nagativeNumber = -1;
let tyInt = null;

const textEl = ["부지런하고", "자유롭고", "인정받고"];
let typingTxt = textEl[arrIndex];

• textEl를 통해 타이핑될 텍스트를 가져오고 HTML요소를 가져온다.

if (typingBool == false) {
    typingBool = true;
    tyInt = setInterval(typing, 200);
}

• 첫번째로 실행될 동작이다.
  만약 타이핑 진행되지 않았다면 typingBool을 true로 바꾸고 typing함수를 실행한다.

function typing() {
    if (typingIdx < typingTxt.length) {
        blinkText.append(typingTxt[typingIdx]);

• 타이핑될 단어를textEl안에 있는 단어를 한글자씩 이어준다. 타이핑 될 텍스트 길이만큼 반복한다.

        typingIdx++;
        if (typingIdx == typingTxt.length) {
            //첫번째 단어가 써지면 1초쉰다.
            clearInterval(tyInt);
            setTimeout(function () {
                tyInt = setInterval(typing, 200);
            }, 1000);
        }

• 첫번째 단어가 완성된다면 1초 쉰다.

    } else {
        if (-typingTxt.length - 1 < nagativeNumber) {
            blinkText.innerHTML = typingTxt.slice(0, nagativeNumber);
            nagativeNumber--;

• 한단어가 끝나면 한글자씩 지운다.

        } else {
            if (arrIndex >= textEl.length - 1) {
                arrIndex = 0;
            } else {
                arrIndex++;
            }

• 추가해 arrindex를 추가해 textEl의 다음 단어를 실행한다 마지막 배열까지 도착했으면 처음으로 돌아간다.

            variableInit();
            //1초후 다음문장 타이핑 
            clearInterval(tyInt);
            setTimeout(function () {
                tyInt = setInterval(typing, 200);
            }, 1000);
        }
    }
}
function variableInit() {
    //변수초기화 
    typingIdx = 0;
    nagativeNumber = -1;
    typingTxt = textEl[arrIndex];
}

• variableInit를 사용해 변수를 초기화해준다.

전체적인 틀을 보면 이렇게 나눌수있다.