본문 바로가기

코딩 학원(국비지원)/개인 프로젝트

동적 페이지 만들기. javascript 코드.

반응형

동적페이지 만들기

 

Javascript 코드

(function(){
    const spanE1 = document.querySelector("main h2 span");
    const txtArr = ['Web publisher', 'Front-End Developer', 'Web UI Designer', 'UX Designer', 'Back-END Developer'];
    let index = 0;
    let currentTxt = txtArr[index].split("");
    console.log(currentTxt);

function writeTxt(){
    spanE1.textContent += currentTxt.shift();
    if(currentTxt.length !==0){setTimeout(writeTxt, Math.floor(Math.random()*100));
    }else{
        currentTxt = spanE1.textContent.split("");
        setTimeout(deleteTxt, 3000);
    }
}

function deleteTxt(){
    currentTxt.pop();
    spanE1.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();
        console.log(index);
    }
}
writeTxt();
 
})();

코드 리뷰를 할 수 있어야한다. 말로 설명하는 연습을 해보자. 

 

 

반응형