setInterval, setInterval, onload

삼전·2023년 5월 25일
0

Javascript 문법

목록 보기
7/15

🔹let interval = setInterval("호출할 함수", 밀리 초): 밀리 초 간격으로 함수를 호출한다!

🔹clearInterval(interval): setInterval을 멈춘다

🔹body태그의 onload 이벤트는 모든 태그가 로드된 후 실행할 함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>

	#view{
		font-size:4em;
	}
	
	#imgView>img { width:100px; height:100px; }
	
</style>
</head>
<body onload = "interval = setInterval('numberChange()', 1000 ); setInterval('addImage()', 1000)">
	<h1>setInterval을 이용한 반복실행</h1>
	<div id="view"></div>
	<div id="imgView"></div>
	<script>

		var n =1;
		// ***인터벌 아이디(Interval ID)라고 불리는 숫자를 반환***
		var interval;  
		var img = ['jeju.png', 'SeoulLogo.jpg', 'swisda.jpg', 'blueButton.png']; 
		
		var numberChange = () => {
			document.getElementById("view").innerHTML = n; 
			if(n>=10){
				clearInterval(interval);
			}
			n++;
			
		}
		//1초에 한 번씩 배열의 이미지 추가
		var i = 0;
		var addImage = () =>{
			var dom = document.getElementById("imgView")
			 dom.innerHTML = dom.innerHTML + "<img src='../img/" + img[i++]+ " '/>"
			//배열의 index를 초기화한다 ->  index = 0 부터 순서 변경
			if(i >= img.length){
				i=0; 
			}
		}

	</script>
</body>
</html>
profile
풀스택eDot

0개의 댓글