웹마스터 팁

  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 요기서 보시면 되구요..

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

이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
XE를 홈페이지 루트에 설치하여 BGM 설치가 불가능할 때... [6] Firstlove 2011.05.29
로그인풀림방지 - 주소 고정하기 [27] ezi 2011.05.28
웹폰트의 개념과 사용법 [2] hika1 2011.05.26
유닉스에서 디스크 용량 체크 후 호출 해주는 프로그램 길버트전 2011.05.24
SSH 지원안하는 웹호스팅에서 빠르게 XE설치하기. [5] file DynamicLaser 2011.05.22
드림위버로 FTP 파일 바로 수정하기 : FTP다운로드->수정->FTP업로드 번거러운 수정과정 X [3] file Treasurej 2011.05.21
XE 첨부파일 문제로 게시판이 백지화 될때... [1] 똑디 2011.05.20
[PHP 기초] 연산자1 난다날아 2011.05.19
모바일레이아웃에서의 통합검색 [11] 카르마 2011.05.19
XE 프로젝트 호스팅 SVN 내용을 Google 프로젝트 호스팅으로 이전하기 file 난다날아 2011.05.17
'왕' '왕초보'를 위한 ZB4-->XE버전으로 이전시 가장 간단한 순서 [1] 쭈영 2011.05.17
XE core 1.4.5.7 코드 오류,(상자 위젯 배경 안될때) [2] 홍성빈닌 2011.05.17
따른사이트와 내채팅방 연동하기~!<미니온4편> [7] file 토끼매니아 2011.05.15
XE 공식 버튼2 삽입하기 [32] file 웹엔진 2011.05.14
th 엘리먼트에 scope 속성 사용 [1] file 엘카 2011.05.14
도와 주세요!!! Explorer 6에서는 제대로 보이는데 Explorer 7 이상에서는 사진이 안보여요 [2] 이영규616 2011.05.12
서버이전후 캐시파일 재생성 안되시는분들 [2] 우냠냠 2011.05.11
youtube (유튜브) 동영상 block없이 게시판에 embed 하기 [23] 쏘프티 2011.05.10
회원 관리자 두기.. DaKi 2011.05.09
CafeXE에서 마이카페 목록을 셀렉트 박스로 바꾸기 file 늘푸른이 2011.05.07
태그 쓰기