[Javascript] 연습예제 - 페이크 타이핑 화면

공부했던 setInterval과 setTimeout을 활용하여 화면을 만들어보자.

특정 문장의 글자가 마치 타이핑을 하듯 한글자씩 화면에 순차적으로 출력되도록 하고 커서바가 깜빡이는 효과도 줄 것이다.

 

<div class="wrap">
    <h1>
        <span class="material-symbols-outlined"> language </span>
    </h1>
    <p id="dynamic" class="lg-text"></p>
    <p class="sm-text">Learn New Language</p>
</div>

시작은 역시 HTML 태그 빌딩

let sents = ["Bienvenue!", "Welcome!", "歡迎!", "환영합니다!"];
let randSent = "";

전역변수로는 두가지를 쓸 것이다. 먼저 네가지 언어로된 인사가 담긴 sents라는 배열과

이중 랜덤으로 뽑힌 문장을 담을 randSent이다.

randomSent();
function randomSent() {
    randSent = sents[parseInt(Math.floor(Math.random() * 4))];
    printRand(0);
}

randomSent라는 함수는 sents 배열에서 랜덤 문장 하나를 챙겨 randSent 변수에 넣어주고 printRand 함수에 매개변수 0을 준다. 첫 라인에서 randomSent 함수를 바로 시작했다.

function printRand(cnt) {
    if (cnt < randSent.length) {
        setTimeout(function () {
            document.getElementById("dynamic").innerHTML += randSent.charAt(cnt);
            cnt++;
            printRand(cnt);
        }, 100);
    } else {
        setTimeout(function () {
            document.getElementById("dynamic").innerHTML = " ";
            randomSent();
        }, 2500);
    }
}

printRand 함수는 문장의 글자들을 약간의 시간간격을 두고 하나씩 화면에 출력해주는 함수로 꾸밀 것이다.

라인별로 떼어서 해석해두겠다;

1. printRand 함수는:

2. 매개변수로 받은 cnt가 randSent라는 string의 길이보다 짧다면

3. setTimeout으로 내부 함수에 지연을 줄건데,

4. dynamic의 ID값을 갖는 태그 안에 randSent의 cnt 인덱스 값을 갖는 글자를 출력시켜나간다.

5. cnt에 1을 더해주고

6. 그 cnt를 매개변수로 다시 printRand 함수를 돌려준다.

7. 앞선 작업들은 0.1초의 딜레이를 가지고 실행한다. 

8. 라인2가 false라면, 즉 cnt의 길이가 randSent의 길이와 같아졌다면, 달리말해 randSent의 모든 글자가 출력됐다면

9. setTimeout으로 내부 함수에 지연을 줄건데,

10. dynamic의 ID값을 갖는 태그 안을 비우고

11. randomSent 함수를 동작시킨다.

12. 10~11의 작업은 2.5초의 지연 이후에 이루어진다.

 

라인11로 randomSent 함수가 동작하면 randomSent 함수는 printRand 함수를 동작시키기에 무한루프가 된다.

 

커서바가 깜빡이는 효과를 주기 위해서..

function blink() {
    document.querySelector("#dynamic").classList.toggle("active");
}
setInterval(blink, 500);

dynamic 태그라인이 active와 비활성을 0.5초 간격을 가지고 반복하도록 잡아줬다.

 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-image: url("/img/bgimg.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
}
.wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    text-align: center;
}
.material-symbols-outlined {
    width: 400px;
    height: 200px;
    font-size: 15rem;
}
.lg-text {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.sm-text {
    font-size: 2rem;
    font-weight: bolder;
}
#dynamic {
    position: relative;
    display: inline-block;
    padding-right: 10px;
}
#dynamic::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background-color: black;
}
#dynamic.active::after {
    display: none;
}

디자인도 잡아줬다. 이 때 커서바 깜빡임을 위해 dynamic이 엑티브일 땐 화면에 보이지 않도록 세팅했다.

 

결과는 아래와 같다.