JavaScript) 타이머 활용: 텍스트 점멸 / 한 글자씩 출력 / 문자열 스크롤 효과

1. 텍스트 점멸 효과 만들기

: setInterval()을 사용하면 일정한 시간 간격마다 특정 동작을 반복할 수 있다.

<h3>시간(timer)에 따라서 점멸</h3>

<div id="time">
	<form name="myform">
		<input type="text" size="20" name="myFrmMsg"/>
	</form>
</div>

<script>
let flg = 0;

function myfunc() {
    if (flg === 0) {
        document.myform.myFrmMsg.value = "환영합니다";
        flg = 1;
    } else {
        document.myform.myFrmMsg.value = "";
        flg = 0;
    }
}
setInterval(myfunc, 500);
</script>

설명:

: setInterval(myfunc, 500); → 0.5초마다 myfunc() 함수가 실행됨.

: myfunc() 함수는 "환영합니다"라는 텍스트를 번갈아가며 표시/숨김 처리한다.

: document.myform.myFrmMsg.value를 이용해 input 필드 값을 조작한다.

1-1. querySelector 사용

let flg = false;
setInterval(() => {
    document.querySelector("#time input").value = flg ? "환영합니다" : "";
    flg = !flg;
}, 500);

: querySelector()를 사용하여 폼을 직접 선택하면 더 직관적이다.

---

2. 한 글자씩 텍스트 출력하기

: 문자열을 한 글자씩 출력하는 효과를 구현하려면 substring()을 이용하면 된다.

<h3>시간에 따라서 한글자씩 출력</h3>

<form name="myFormOne">
    <input type="text" size="30" name="myFrmMsgOne"/>
</form>

<script>
let message = "방문을 환영합니다 어서 오십시오";
let count = 0;

function countfunc() {
    document.myFormOne.myFrmMsgOne.value = message.substring(0, count) + "_";
    count = (count === message.length) ? 0 : count + 1;
}
setInterval(countfunc, 200);
</script>

설명:

: message.substring(0, count) + "_" → 현재까지의 텍스트 뒤에 _를 추가하여 입력 중인 느낌을 줌.

: count 값이 message.length에 도달하면 다시 0으로 초기화하여 반복.

2-1. textContent 사용

let message = "방문을 환영합니다 어서 오십시오";
let count = 0;
setInterval(() => {
    document.querySelector("input[name='myFrmMsgOne']").value = message.substring(0, count) + "_";
    count = (count === message.length) ? 0 : count + 1;
}, 200);

: document.querySelector()를 사용하면 name 속성으로도 쉽게 접근할 수 있다.

---

3. 문자열을 좌우로 스크롤시키기

: 텍스트를 흘러가게 하려면 일정 간격으로 문자열을 잘라서 업데이트하면 된다.

<h3>문자열(메시지)이 스크롤된다</h3>

<form name="myFormTwo">
    <input type="text" size="30" name="myFrmMsgTwo"/>
</form>

<script>
let msg = "'소득대체율 이견' 좁혀질까…野, 2월 국회 단독처리도 시사";
msg = msg + msg;  // 같은 내용을 반복하여 스크롤 효과
let cnt = 0;

function scrfunc() {
    document.myFormTwo.myFrmMsgTwo.value = msg.substring(cnt, msg.length);
    cnt = (cnt === (msg.length/2)-1) ? 0 : cnt + 1;
}
setInterval(scrfunc, 200);
</script>

설명:

: msg = msg + msg; → 텍스트를 길게 만들기 위해 같은 내용을 2번 연결

: substring(cnt, msg.length) → cnt 값이 증가할수록 왼쪽에서 오른쪽으로 텍스트가 이동하는 효과 발생

: cnt = (cnt === (msg.length/2)-1)?0:cnt+1; → 일정 길이에 도달하면 다시 처음부터 반복

3-1. textContent 사용

let msg = "'소득대체율 이견' 좁혀질까…野, 2월 국회 단독처리도 시사   ";
msg += msg;
let cnt = 0;

setInterval(() => {
    document.querySelector("input[name='myFrmMsgTwo']").value = msg.substring(cnt);
    cnt = (cnt === msg.length / 2 - 1) ? 0 : cnt + 1;
}, 200);

: querySelector()를 사용하여 더 간결하게 작성

---

효과	설명	주요 함수
텍스트 점멸	일정 시간 간격으로 텍스트를 표시/숨김 처리	setInterval(), if-else
한 글자씩 출력	substring()을 이용하여 한 글자씩 표시	substring(), setInterval()
문자열 스크롤	substring()을 이용하여 문자가 좌우로 이동	substring(), setInterval()