본문 바로가기
정보창고/블로그 정보

HTML-Text 에어리어에 글자 타이핑

풍란의 향기 2012. 2. 9. 13:31

[Scroller] 텍스트에어리어에 글자 타이핑
텍스트 에러리어에 글자를 타이핑 합니다.데모를 눌러 확인하세요.



Script Example
<html>
<head><title>데모</title>
<SCRIPT LANGUAGE = "JavaScript">
var outMsg = "";
var i = 0;
var lineNo = 1;
var timerDM=null;
var msg = " ";
function araVob() {
}
var ScreenLine = new araVob();
ScreenLine[1]  = "안녕하세요.홈제작바이블의 Tianai 입니다."
ScreenLine[2]  = "쓸말이 없군요"
ScreenLine[3]  = "그럼 조용히 있겠습니다. ";
ScreenLine[4]  = "캄사합니다."
ScreenLine[5]  = "이렇게 하면 지우고 다시 써요\f"
ScreenLine[6]  = "괜찮나요?"
ScreenLine[7]  = " ";
ScreenLine[8]  =  "한줄띄려면 블랭크를..^^"
ScreenLine[9]  = " ";
ScreenLine[10] =  "하하하 잼있다.\f";
ScreenLine[11] = "참고사항..."
ScreenLine[12] = "\t없습니다.";
ScreenLine[13] = " \f";
var msgNum = 1;          
var msgCnt = 13;         // 메세지수
var typeSpeed = 70;      // 타이핑 속도
var pageLen = 5;        
var delay=typeSpeed;
var r = 0;
var cr="\r\n"
if ("3" <=navigator.appVersion.charAt(0)) {
var cr="\n"
}
for (x = 1; x<=(msgCnt); x++) {
  ScreenLine[x] = ScreenLine[x] + cr;
}
msg = ScreenLine[1];
function DisplayMsg() {
  if (msg.length <= i || msg.charAt(i) == "\f") {
    r=i;
    i=0;
    ChangeMsg();
  }
  outMsg = outMsg + msg.charAt(i);
  i++;
  if (msg.charAt(i) == "\f" || (lineNo == pageLen && i==msg.length)) {
    delay = 4000; }
  else {
  if (msg.charAt(i) == cr && msg != " "+cr) {
    delay = 2000; }
  else {
    delay = typeSpeed; }
  }
  self.document.forms[0].elements[0].value=outMsg;
  timerDM = setTimeout("DisplayMsg()",delay);
}

function ChangeMsg() {
msgNum++;
if (msgCnt < msgNum) {
   msgNum = 1;
}
lineNo++;
if (pageLen < lineNo || msg.charAt(r) == "\f") {
  outMsg=ScreenLine[msgNum].charAt(i);
  i++;
  lineNo = 1;
}
  msg = ScreenLine[msgNum];
}

function quitDisplay() {
  self.document.forms[0].elements[0].value = "Type yourself a Note today!";
}
// -->
</SCRIPT>

</head>
<BODY onLoad="DisplayMsg()"; onUnload="quitDisplay()">
<FORM NAME= "msgform" ACTION=" ">
<TEXTAREA NAME="msgarea" COLS=80 ROWS=5>
첫번재 메세지
</TEXTAREA>
</FORM>
</body>
</html>


설명
스크립트 코드를 당신의 홈페이지 head 태그 사이에 넣으세요. 그리고 body 태그안에 파란색처럼 쓰시고요..메세지는 녹색부분에서 정의하시면 됩니다. 그 아래 메세지숫자와 속도를 조정하시면 되구...참고로 메세지에 글자를 넣을때 \f를 입력하면 화면을 클리어 시킵니다.\t를 첨가하면 탭으로 쓰이고요.한줄 건너 띄려면 메세지에 아무것도 기입하지 않으면 되요.

'정보창고 > 블로그 정보' 카테고리의 다른 글

HTML-글자에 Wave주기  (0) 2012.02.09
HTML-글자에 네온효과  (0) 2012.02.09
HTML-상태바에 메세지 출력  (0) 2012.02.09
HTML-랜덤 배경그림  (0) 2012.02.09
HTML-Slide Show  (0) 2012.02.09

'정보창고/블로그 정보' Related Articles

티스토리툴바