JAVASCRIPT LAST(0506)

#timing event

setTimeout(함수 , 시간) : 해당 시간이 지난 후 함수 실행
시간의 단위는 밀리세턴드이다(1000ms = 1s)
setInterval(함수 , 시간) : 해당 시간이 지날때마다 함수 실행

타이밍 함수(함수, 시간, 값1,값2, ....)

값1,값2 ... 는 함수의 인자값으로 지정한다.

clearTimeout(타임아웃 객체), clearInterval(타임아웃객체) - 작업 종료

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#img1{
	height : 250px;
}
</style>
<script type="text/javascript">
var imgs = ["whale1.png","whale2.png","whale3.png"]; // 그룹으로 지정
var now =0; // 현재 이미지 위치가 어디인지( index의 위치)

var interval = null; // 누를때마다 인터벌이 생기면 안되기때문에 
var timeout = null;

function playImg() {
	if(interval == null){ // 중복을 막기위해 인터벌이 널일때만 플레이된다.
		timeout  =  setTimeout(fade,2700); 
		interval = setInterval(changeImg,3000); // 인터벌 변수에 인터벌 세팅 함수 제공 이미지를
	}
}

function changeImg() {
	now++; // 배열의 순서대로 이동 시키기 위해 1씩 증가시킨다.
	
	if (now == imgs.length) { // 배열 안에서 반복되어야한다. 따라서 배열의 길이와 현재 위치가 같아지면
    						  // 위치를 다시 0으로 보낸다.
		now =0;
	}
	document.getElementById("img1").src = imgs[now]; // 그리고 해당 위치에 있는 이미지를 화면으로 출력
	timeout = setTimeout(fade,2700);
}

function stopImg() { // 자동 변함을 멈추는 함수
	clearInterval(interval); // 그저 인터벌 제거 함수
	clearTimeout(timeout);
	interval = null; // 인터벌이 널로 들어가있어야 다시 시작할때 중복이 발생하지 않는다.
}

function fade() { 
	//fadeOut  0.5초 동안 투명도가 옅어진다. 0.3s -> 300/20 =>15, 1.0/20 => 0.05
	for(var i = 0; i <20 ; i ++){ //20번 동안 서서히 줄어든다.
		setTimeout(function (t) {
			document.getElementById("img1").style.opacity = 1.0 - (0.05*t);
		},15 * i, i)
	}
	//fadeIn  0.5초 동안 투명도가 진해진다.
	for(var i = 0; i <20 ; i ++){
		setTimeout(function (t) {
			document.getElementById("img1").style.opacity = 0.0 + (0.05*t);
		},300 + (15 * i), i)
	}
}
</script>
</head>

<body>
<img alt ="이미지" src ="whale1.png" id ="img1">
<br>
<input type="button" value="play" onclick ="playImg();">
<input type="button" value="stop" onclick ="stopImg();">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>움직이는 시간</title>

<script type="text/javascript">
var timeout = setTimeout(function() {
			  alert("f");
			  },3000);

setTimeout(test,3000);

function test() {
	console.log("test");
}

function stopT() {
	clearTimeout(timeout);
}

setInterval(function () {
	var d = new Date();
	var now = d.getHours() + ":" +  d.getMinutes()+ ":" + d.getSeconds()
	document.getElementById("a").innerHTML = now;
},1000);

setInterval(function (t) {
	var d = new Date();
	var now = d.getHours() + ":" +  d.getMinutes()+ ":" + d.getSeconds()
	document.getElementById("a").innerHTML = now + "<br/>";
	document.getElementById("a").innerHTML += t + ">" + now;
},1000,"abc");
</script>
</head>
<body>
<input type="button" value = "살고 싶으면 3초안에 누르시오." onclick ="stopT();">
<div id ="a"></div>
</body>
</html>

예로 스크립트로 jquery를 불러오고 새로운 스크립트를 작성하려면 꼭 스크립트 영역을 하나 더 생성해줘야한다.

'about. What I learned > about.Gudi' 카테고리의 다른 글

메타 데이터 (0)	2021.05.13
jQuery start(0507) (0)	2021.05.07
5/3일 - javaScript (0)	2021.05.03
자바스크립트(Javascrip (0)	2021.04.29
CSS (0)	2021.04.26

#timing event

'about. What I learned > about.Gudi' 카테고리의 다른 글

티스토리툴바