웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
DHTML의 시작 - Typing 스크립트 (예제)
2002.04.19 13:10
정작 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 요기서 보시면 되구요..
가끔가다 시간 나면 소스 하나씩 스터디 중간중간 만들어 올리도록 하지요
다시 원래 의도한 대로 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 요기서 보시면 되구요..
가끔가다 시간 나면 소스 하나씩 스터디 중간중간 만들어 올리도록 하지요
댓글 2
제목 | 글쓴이 | 날짜 |
---|---|---|
[HTML 초보자] HTML 홈페이지의 태그 기본구조. [4] | ZipShin | 2002.08.07 |
[Siren]하나도 안귀엽게 -ㅅ-;; 문서 정렬하기 [5] | 세이렌 | 2002.08.01 |
[스타일시트] 페이지 여백 없애기2 ^^ ↓ 아래글을 보충합니다. [8] | ZipShin | 2002.07.31 |
[Siren]페이지 여백 없애기 [8] | 세이렌 | 2002.07.31 |
웹페이지 소스보기. [4] | ZipShin | 2002.07.31 |
[Siren]이미지 주변에 점선 테두리 생기게 하기 ^_^ [6] | 세이렌 | 2002.07.30 |
[Siren]글자(문자,폰트) 링크 커서 제어하기 [8] | 세이렌 | 2002.07.30 |
[Tip]로딩속도 높이는 10가지 방법. [8] | HomeBox™ | 2002.06.28 |
마우스 오버시에 텍스트 버튼느낌 style.css 와 자동 스크롤 기능 [5] | HomeBox™ | 2002.06.27 |
제로보드 가입폼에 css쉽게 적용하기 | {동준짱} | 2002.06.26 |
로보트 검색엔진에 잘 걸리는 Meta Tag 작성법 [8] | 이성영 | 2002.06.20 |
메타태그(Meta)의 모든것 [11] | ZipShin | 2002.06.20 |
홈페이지의 대문에서 스크롤바 없애기 [10] | keymove | 2002.06.15 |
DHTML의 시작 - Form 예제 (폼처리 HTML) | Legend | 2002.05.09 |
저기에서 이리로 온 글입니다. [3] | 이성영 | 2002.05.07 |
DHTML의 시작 - Typing 스크립트 (예제) [2] | Legend | 2002.04.19 |
DHTML의 시작 - CSS와 객체 관계 [2] | Legend | 2002.04.12 |
드래그하면 바뀌는 마술거울효과 (-_-")v [16] | 짱나 | 2002.04.05 |
엔지오식 레이어 메뉴 구성하기 (허접) [3] | 정영순 | 2002.03.28 |
두 개의 프레임을 동시에 제어하기 [4] | (づ_-) 위드 | 2002.03.25 |