반응형
동적페이지 만들기
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();
})();
코드 리뷰를 할 수 있어야한다. 말로 설명하는 연습을 해보자.
반응형
'코딩 학원(국비지원) > 개인 프로젝트' 카테고리의 다른 글
구글 코랩(Google Colab)으로 만든 배당금 종합 프로그램 (3) | 2023.06.15 |
---|---|
수직 스크롤 발생 시 header 태그에 active 클래스 추가 및 삭제 (4) | 2023.06.02 |
정적 페이지 완성, 미디어 쿼리 적용 (2) | 2023.05.23 |
개인프로젝트 What I DO 영역 완성 (1) | 2023.04.18 |
헤더 영역과 메인 영역 완성. (1) | 2023.04.15 |