자바스크립트 타이밍
- SetTimeout(함수, 시간) - 지정 시간이 지난 후 함수 실행
- 시간 단위 : 밀리 세컨드 , 1000 ms = 1초
- SetInterval(함수 ,시간) - 지정시간이 지날 때 마다 함수 실행
- 타이밍 함수(함수, 시간, 값1,값2,...)
- 값1,값2 ==> 함수의 인자로 지정
- clearTimeout(타임아웃객체), clearInterval(타임아웃객체) - 작업 종료
- 변수에 넣어서 함수안에 넣는다.
test 18 참고
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(t) {
var d = new Date();
var now = t + ">"+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>test19 참고
<!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
src=test19.js">
</script>
<script type="text/javascript">
alert("이것이다!!");
</script>
</head>
<body>
<img alt="이미지" src="가위.png" id="img1"/>
<br/>
<input type="button" value="play" onclick="playImg();"/>
<input type="button" value="stop" onclick="stopImg();"/>
</body>
</html>test19.js
*
*/
var imgs = ["가위.png","바위.png","보.png"];
var now =0;
var interval = null;
var timeout = null;
function playImg(){
if(interval == null){
timeout = setTimeout(fade, 2700);
interval = setInterval(changeImg,3000);
}
}
function changeImg(){
now++;
if(now == imgs.length){
now = 0;
}
document.getElementById("img1").src = imgs[now];
timeout = setTimeout(fade, 2700);
}
function stopImg(){
clearInterval(interval);
clearTimeout(timeout);
interval = null;
}
function fade(){
//fadeout 0.3s --> 300 / 20 ==> 15, 1.0 / 20 = 0.05
for(var i = 1; i <= 20 ; i++){
setTimeout(function(t){
document.getElementById("img1").style.opacity = 1.0 - (0.05 * t)
}, 15 * i, i);
}
//fadeIn 0.3s
for(var i = 1; i <= 20 ; i++){
setTimeout(function(t){
document.getElementById("img1").style.opacity = 0.0 + (0.05 * t)
}, 300 + (15 * i), i);
}
}
``
호텔리어 출신 비전공자