🪐 logic
- html에 (js로 만든)text가 들어올 태그를 생성해준다
- js에서 보여주고 싶은 text를 변수에 만든다
- 기본 index를 설정(값: 1)한 뒤, 함수를 통해 해당 text를 slice로
slice(0, index)해준다
➡ 0부터 index까지 slice하므로, 처음에는 맨 앞글자만 보여진다
➡ index가 ++되므로 slice의 범위는 뒤로 갈수록 한 글자씩 추가된다
➡ index의 길이가 text전체 길이를 넘어서면 index는 다시 1이 된다(첫 글자로 돌아감)
➡ setTimeout함수를 설정하여 해당 함수를 2초마다 실행되도록 한다(2초마다 글자가 보여짐)
🐸 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css" /> <title>New Year Countdown</title> </head> <body> <h1 id="text"> (js로 생성 예정) </h1> <script src="index.js"></script> </body> </html>
🐸 css @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: darksalmon; font-family: 'Roboto', sans-serif; overflow: hidden; } div { position: absolute; bottom: 20px; padding: 10px 20px; background: rgba(0, 0, 0, 0.1); font-size: 18px; } input { width: 50px; padding: 5px; font-size: 18px; background-color: darksalmon; border: none; text-align: center; } input:focus { outline: none; }
🐸 js const textEl = document.getElementById('text') const text = 'I Love Hiking!' let idx = 1; function writeText() { textEl.innerText = text.slice(0, idx) idx++ if (idx > text.length) { idx = 1 } setTimeout(writeText, 2000) } writeText()
boma91@gmail.com