JavaScript

자바스크립트 (JavaScript) - 31 : innerHTML과 타이머 함수

n.han 2016. 7. 19. 16:20

- innerHTML과 타이머 함수

 

innerHTML 속성은 한 요소의HTML 컨텐츠를 가지고 있는 것이다.

 

또한 타이머 함수는 특정한 시간에 특정한 함수를 실행할 수 있게 하는 함수이다.

 

다음은 타이머 함수와 innerHTML을 활용하여 body HTML 컨텐츠를 1초마다 load 완료 후 10초까지 Date를 추가하는 예제이다.

 

메서드 이름

설명

setTimeout(function, millisec)

일정 시간 이후 함수를 한 번 실행

setInterval(function, millisec)

일정 시간마다 함수를 반복 실행

clearTimeout(id)

일정시간 후 함수를 한 번 실행하는 것 중단

clearInterval(id)

일정 시간마다 함수 반복하는 것을 중단

 

 

<!DOCTYPE html>

<html>

<head>

        <title></title>

        <meta charset="UTF-8">

        <script>

        function init(){

                var intervalID = setInterval(function(){

                        document.body.innerHTML += new Date() + '<br/>';

                }, 1000);

               

                setTimeout(function() {

                        clearInterval(intervalID);

                }, 11000);

        }

       

        window.onload = init();

        </script>

</head>

<body>

</body>

</html>