🔹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;
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++;
}
var i = 0;
var addImage = () =>{
var dom = document.getElementById("imgView")
dom.innerHTML = dom.innerHTML + "<img src='../img/" + img[i++]+ " '/>"
if(i >= img.length){
i=0;
}
}
</script>
</body>
</html>