웹마스터 팁

  2. Support
  3. 웹마스터 팁

DHTML의 시작 - Typing 스크립트 (예제)

2002.04.19 13:10

Legend

정작 DHTML에 대한 강좌가 폼쪽으로 하다보니 다른 강좌로 바뀌는 것 같아서
다시 원래 의도한 대로 DHTML도 섞어서 해보기로 했습니다.
NeoM MVP II 버전에 쓰일 모듈로써 하나씩 시험삼아 만들어 본 스크립트지요.
지금은 테스트를 위해 홈페이지에 게시판에 Notice시 삽입해서 사용하고 있지요..
미리보기에서 확인해보실 수 있습니다.
스크립트 길이도 얼마되지 않으니 적당한 쓸때가 있을 듯 하네요..

주석 보시고 소스 분석 연습도 해보시는 것도 좋지요.

<SCRIPT LANGUAGE="JavaScript">
<!--
var help_text=new Array();  // 타이핑할 문자열을 배열로 지정하지요. 아래처럼 순서대로 넣습니다.
help_text[0]="대충 타이핑 스크립트 만들어 봤습니다."
help_text[1]="이름은 Neo Crazy Typing이라구 "
help_text[2]="지었지요.. 어디 쓸만한데 있으심"
help_text[3]="써 보시지요..."

var i=0, j, k=0; // 변수지정, 타이핑 카운트를 조절하기 위한 변수들이지요.
var helpID; // 타임아웃 시킬 아이디를 지정합니다. (마우스 오버시 타이핑을 멈추게 하려고 사용하지요
var tail="▒"; // 글자 뒤의 커서 역할을 하는 모양이지요
function help(){
        el=document.all.typing;  // 표시할 엘리먼트를 지정합니다. (typing이 id지요)
        if(help_text[k].length+r>=i) // 문자열의 길이에 적당한 숫자를 더해서 i값과 비교
        {
                if(i<r){ // 초기 몇번 커서의 깜박임을 주는 효과지요
                        if(el.innerText==tail)  // 아래 부분이 깜박이는 부분..
                                el.innerText=" ";
                        else
                                el.innerText=tail;
                        helpID=setTimeout("help()",time2);  // 함수를 다시 호출합니다.
                        j=help_text[k].length+r; // 현재 했던것을 다시 반복하기위해 필요하지요
                }
                else{
                        el.innerText=help_text[k].substring(0,i-r)+tail; // 깜박임을 끝내고 실지 글을 씁니다.
                        helpID=setTimeout("help()",time1); // 역시 자신을 다시 호출하지요.
                }
                i++;
        }
        else  // 아래부분은 윗 함수의 역실행으로 보시면 됩니다.
        {
                if(help_text[k].length<j){
                        if(el.innerText==help_text[k])
                                el.innerText=help_text[k]+tail;
                        else
                                el.innerText=help_text[k];
                        helpID=setTimeout("help()",time2);
                }
                else{
                        el.innerText=help_text[k].substring(0,j)+tail;
                        helpID=setTimeout("help()",time1);
                }
                if(j==0){ // 한 사이클이 실행되면
                        i=0;r=rnd(30);time1=rnd(50); time2=rnd(200); // 타이핑 속도나 지연시간을 랜덤하게 다시 설정하지요
                        if(help_text.length-1>k) // 다음 문자열을 불러옵니다.
                                k++;
                        else
                                k=0;
                }
                j--;
        }
}

function rnd(n) { return Math.floor(Math.random()*n)+1; } // 랜덤 수를 뽑아오는 게지요
var time1=rnd(50), time2=rnd(200), r=rnd(30); // 초기값을 가져옵니다.
//-->
</SCRIPT>
<body onload="help()">
<span id=typing onMouseout="help()" onMouseOver="clearTimeout(helpID)"></span>

음.. 미리보기는 http://neom.new21.net/zboard/zboard.php?id=qna 요기서 보시면 되구요..

가끔가다 시간 나면 소스 하나씩 스터디 중간중간 만들어 올리도록 하지요

이 게시물을
수정 삭제
좋아요
목록
태그 쓰기