- 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> |
'JavaScript' 카테고리의 다른 글
자바스크립트 (JavaScript) - 33 : 코드 실행 함수 eval (0) | 2016.07.19 |
---|---|
자바스크립트 (JavaScript) - 32 : 인코딩과 디코딩 함수 (0) | 2016.07.19 |
자바스크립트 (JavaScript) - 30 : 함수 스코핑(functional scoping)과 클로저 (0) | 2016.07.19 |
자바스크립트 (JavaScript) - 29 : 함수 스코핑(functional scoping)과 클로저 (0) | 2016.07.19 |
자바스크립트 (JavaScript) - 28 : 함수 스코핑(functional scoping)과 클로저 (0) | 2016.07.19 |