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

HTML-글씨 타이핑 소리 나게할때

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

질문게시판이나 자유게시판에서 글쓰기나 코멘트를 쓸 경우...

타이핑 소리가 나오죠. 아래는 소스구요.

업로드 파일을 다운 받아서 사용하세요.


<SCRIPT LANGUAGE="JavaScript">
<!--
var playNum = 0;
var soundArr = new Array();
        soundArr[0]        =        "";
        soundArr[1]        =        "/html/ex/typing_sound/sound/TYPE.wav";
        soundArr[2]        =        "/html/ex/typing_sound/sound/WHOOSH.wav";
        soundArr[3]        =        "/html/ex/typing_sound/sound/PIHW.wav";

function play(p_num) {
        var tmp        = "typingSound" + (playNum++ % 4);
        document.all[tmp].src=soundArr[p_num];
}

function enterSound() {
        var k = event.keyCode;
        if(k==13) play(2);
        else if(k==8) play(3);
        else if ( (k >= 37 && k <= 40) ||  ( k >= 16 && k <= 18)  ) play(0);
        else play(1);
}
// -->
</SCRIPT>


<bgsound id="typingSound0">
<bgsound id="typingSound1">
<bgsound id="typingSound2">
<bgsound id="typingSound3">


<textarea name=memo cols=50 rows=15 class=textarea style=width:100% onKeydown="enterSound();"></textarea>


검색용 : 사운드, 소리, 타이핑

 

[폼태그] 글자 타이핑
입력폼안에 원하는 글자를 타이핑 치듯이 출력합니다.



Script Example

<HTML>
<HEAD>
<TITLE>폼안에서 타이핑</TITLE>

<script language="JavaScript">
<!--
var max=0;
function textlist()
{
        max=textlist.arguments.length;
        for (i=0; i<max; i++)
                this[i]=textlist.arguments[i];
}

tl=new textlist
(
        "안녕하세요",
        "저의 홈 페이지입니다.",
        "여기를 수정하세요."
);

var x=0; pos=0;
var l=tl[0].length;

function textticker()
{        
        document.form1.textfeld.value=tl[x].substring(0,pos)+"_";

        if(pos++==l)
        {
                pos=0;
                setTimeout("textticker()",1000);
                x++;
                if(x==max)
                        x=0;
                l=tl[x].length;
        } else
                setTimeout("textticker()",50);

}

-->
</script>
</HEAD>

<BODY onload="textticker()">

<CENTER>
<form name="form1"><input type=textarea name="textfeld" size="30"></form>
</center>

</body>
</html>


설명

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

HTML-성별,생년월일 자동으로 넣기  (0) 2012.02.09
HTML-배경이미지 랜덤으로 설정할때  (0) 2012.02.09
HTML-검색 폼 input box에 이미지 넣기  (0) 2012.02.09
HTML-막대 그래프 동적으로 움직이기  (0) 2012.02.09
HTML-이미지 싸이즈 변경하기  (0) 2012.02.09

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

티스토리툴바