▶▷ 알아두면 좋은 것들
관련글
1. [자바스크립트] 'image', 클릭했을때 사진을 바꿔보자!
2. [자바스크립트] 'focus', 엔터 누르고 이동하자!
setInterval() 함수에 대해서는 길게 설명하지 않을려고 해요.
모든 설명은 앞글 -관련글 4번째-의 setTimeout() 과 동일합니다.
다만 다른점은 setTImeout()은 한번의 실행에 그치는데 반해서, 그래서 계속적인 동작을 주기위해 재귀문-Recursive-를 썼었죠?,
setInterval은 인자로 들어간 시간만큼 계속해서 반복을 하게 됩니다.
이때 중지하는 방법은 clearInterval()을 통해서 중지하든지 페이지를 나가야 합니다.
이것만 제외하면 모든 사용방법과 동작방법은 setTimeout(), clearTimeout() 과 동일합니다.
꼭, 관련글 4번째를 읽어보시길 권유합니다.
소스(Source)
소스는 따로 첨부하지 않습니다.
이미지 파일 3개와 html파일 1개 총 4개의 파일이 존재합니다.
소스 사용방법은 모든 파일이 동일 경로내 즉 , 같은 폴더안에 존재해야 합니다.
그렇다면 이상없이 실행 가능할 것입니다.
<HTML>
<HEAD>
<TITLE>자바스크립트를 활용한 타이머 2</TITLE>
</HEAD>
<SCRIPT language="javaScript">
var timerID;
var arrImage=new Array();
arrImage[0]="num1.png";
arrImage[1]="num2.png";
arrImage[2]="num3.png";
function image_onclick(){
1. timerID=setInterval("change_image()", 2000);
alert("배너를 시작합니다.");
}
2. function change_image(){
var newImageNum=Math.round(Math.random()*2);
while(true){
if(document.banner.src.indexOf(arrImage[newImageNum]) >= 0){
newImageNum=Math.round(Math.random()*2);
}else{
document.banner.src = arrImage[newImageNum];
break;
}
}
}
function stop_banner(){
alert("방금 정지한 타이머의 식별자(ID)는 "+timerID+"입니다.");
3. clearInterval(timerID);
}
</SCRIPT>
<BODY>
setTimeout()을 이용한 예제입니다.<br>
이미지를 클릭하시면 2초뒤에 다음 이미지로 바뀌게 됩니다.<br>
<a href="javascript:image_onclick()" onfocus=this.blur()><image name=banner src="num1.png" width=200 border=0></a>
<input type=button value=중지 onclick=stop_banner()>
</BODY>
</HTML>
소스설명
1.3. setTimeout()과 clearInterval()
clearInterval(timerID);
- setInterval() 함수와 clearInterval()을 사용했습니다. 이전 글과 동일합니다.
2. 이미지 배열 선언
var newImageNum=Math.round(Math.random()*2);
while(true){
if(document.banner.src.indexOf(arrImage[newImageNum]) >= 0){
newImageNum=Math.round(Math.random()*2);
}else{
document.banner.src = arrImage[newImageNum];
break;
}
}
}
- 이전 글과 다른 점은 재귀문 부분이 필요없기 때문에, 생략했습니다. 동일합니다.
'blur', 이미지 클릭시 테두리를 없애자!
'onmouseover', 마우스 오버 효과 - 글씨 바꾸기!