Jam's story

[JS] 한문자씩 읽어오기 본문

WEB/JavaScript

[JS] 한문자씩 읽어오기

애플쩀 2022. 6. 8. 16:31 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.08 16:21:51</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex12_03.html</h3>
<button>TypeWriter</button>
<p id="demo"></p>
한문자씩 읽어오기 
<script>
    var content;
    var contentLength;
    var demo=document.getElementById("demo");
    var i=0;
    var timer;
    $("button").click(function(event){
        //html 루트엘리먼트 document.documentElement.innerHTML;
        //alert(content);
        content=document.documentElement.innerHTML;
        contentLength=content.length;
        typeWriter();
    });

    function typeWriter(){
        if(i<=contentLength){
            var oneChar=content.charAt(i++);
            demo.innerHTML+=(oneChar=='\n'?"<br>":oneChar);
            timer=setTimeout(typeWriter,50);;

        }else{
            clearTimeout(timer);
            alert("출력완료");
        }
    }
</script>
</body>
</html>
저작자표시

'WEB > JavaScript' 카테고리의 다른 글

[Js] Map  (0) 2022.06.09
[JS] 스크롤 표시하기  (0) 2022.06.08
[JS] call 로 메소드 호출  (0) 2022.06.08
[JS] export  (0) 2022.06.08
[JS] 클래스  (0) 2022.06.08
'WEB/JavaScript' Related Articles more
Comments