티스토리 뷰
2. 레이어.
<html>
<head>
<style type=text/css>
.k1{position:absolute;left:200;top:100;width:200;height:200;z-index=2}
.k2{position:absolute;left:200;top:100;width:200;height:200;background-color:green;z-index=1}
.k3{position:absolute;left:220;top:120;width:200;height:200;font-size:40;font-family:'arial black';z-index=3}
</style>
</head>
<body>
<div class=k1><img src="quick_01.gif"></div>
<div class=k2></div>
<div class=k3>EXting</div>
</body>
</html>
3. 이미지 차례대로 보여주기(setInterval 사용)
<html>
<head>
<script language=javascript>
a=new Array("quick_01.gif","quick_02.gif","quick_03.gif");
cnt=0;
function k1()
{
document.pic.src=a[cnt];
cnt++;
if(cnt>2) cnt=0;
}
</script>
</head>
<body>
<img src="quick_01.gif" name=pic>
<script language=javascript>
setInterval("k1()",1000);
</script>
</body>
</html>
결과값: 1초마다 quick_01.gif -> quick_02.gif
quick_02.gif -> quick_03.gif
quick_03.gif -> quick_01.gif
4. setTimeout, setInterval
setTimeout를 이용하여 페이지 이동:
<html>
<head>
<script language=javascript>
function k1()
{
location.href="http://www.naver.com";
}
</script>
</head>
<body onLoad="setTimeout('k1()',5000)">
<h3>5초후에 네이버로 이동합니다.</h3>
</script>
</body>
</html>
setInterval를 이용한 시계
<html>
<head>
<script language=javascript>
function k1()
{
now=new Date();
show_time=now.getHours()+":"+now.getMinutes()+":",now.getSeconds();
document.form.time.value=show_time;
b=now.toLocaleString();
document.form.time1.value=b;
}
</script>
</head>
<body>
<form name=form>
시계:
<input type=text name=time><p>
날짜+시계:
<input type=text name="time1" size=35><p>
</form>
<script language=javascript>
setInterval("k1()",1000);
</script>
</body>
</html>
결과값:
매초마다 초가 움직인다.