728x90
<!DOCTYPE html>
<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 : 일정시간마다 반복하는 것을 중지 한다.
'JSP > Muzi' 카테고리의 다른 글
| 10분 만에 하는 초 속임수 페이지네이션 처리(paging 페이징처리) (0) | 2023.10.07 |
|---|---|
| 초마다 이미지 변경하기 (0) | 2023.10.06 |
| 등록일자 시간 나타내기 (0) | 2023.10.04 |
| 읽기 전용으로 바꾸기disabled,readonly (0) | 2023.08.01 |
| 시험 및 요약 (0) | 2023.07.17 |