자바스크립트를 이용하여 일정시간 후 이벤트를 발생시키거나, 일정시간마다 이벤트를 발생시키는 방법에 대하여 알아 보도록 하겠습니다.
이번 예제는 일정 시간(3초) 후 또는 일정시간(1초)마다 배경색을 랜덤으로 변경시키는 것 입니다.
먼저 소스 및 설명 아래에 있는 결과확인하기 부분에서 어떻게 발생되는지 버튼을 클릭해 보고 확인 해 보시면 이해하기 쉬울 것 입니다.
자바스크립트 소스 및 설명
<html>
<head>
<title>일정시간마다 이미지 변경하기</title>
</head>
<script type="text/javascript">
var timeout; //변수선언
var interval; //변수선언
function startAct1(){
//선언한변수 = 한번실행함수(실행시호출 할 함수, 시간설정-3초후실행)
timeout = setTimeout('chImg()',3000);
}
function stopAct1(){
//setTimeout을 중지시키는 함수(중지대상 변수)
clearTimeout(timeout);
}
function startAct2(){
//선언한변수 = 반복실행함수(실행시호출 할 함수, 시간설정-1초후실행)
interval = setInterval('chImg()',1000);
}
function stopAct2(){
//setInterval을 중지시키는 함수(중지대상 변수)
clearInterval(interval);
}
function chImg(){
//변수 = 랜덤함수(100에서 999999까지의 숫자 중 랜덤으로 생성시킨다)
var ranNo = Math.floor(Math.random() * 999999) + 100;
//id값이 imgView인 영역의 바탕색을 랜덤함수로 획득한 값으로 변경한다.
document.getElementById("imgView").style.backgroundColor = "#" + ranNo;
}
</script>
<body>
<div id="imgView" style="width:90%; height:350px;"></div>
<br>
<input type="button" value="한번실행" onClick="startAct1()">
<input type="button" value="한번실행중지" onClick="stopAct1()">
<br>
<input type="button" value="반복실행" onClick="startAct2()">
<input type="button" value="반복실행중지" onClick="stopAct2()">
</body>
</html>
결과 확인하기(버튼을 눌러 예제 결과를 확인 해 보세요)
정리
- setTimeout : 일정 시간 후 한번 실행
- setInterval : 일정 시간마다 반복 실행
- clearTimeout : 일정 시간 후 한번 실행하는 것을 중지 합니다.
- clearInterval : 일정시간마다 반복하는 것을 중지 합니다.
마무리
setInterval 함수를 이용하면 배경이미지를 일정시간마다 변경 할 수도 있으며, 더욱 다양한 기능을 구현 해 볼 수 있을 것 입니다. 그러나 생각보다는 많이 사용되지는 않는 것 같습니다.
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
[HTML/CSS] DIV 중앙, 가운데 배치하기 (6) | 2018.07.01 |
---|---|
[JavaScript] 펼쳐지는 세로 트리메뉴 쉽게 만들기 (3) | 2018.06.25 |
[자바스크립트] 현재시간 화면에 표시하기 (4) | 2018.06.20 |
[HTML/CSS] 텍스트 그림자 효과 꾸미기 (4) | 2018.06.19 |
[HTML/CSS] 카테고리 DIV 박스 만들기 (2) | 2018.06.17 |