: window 객체의 setTimeout() 메소드는 지정된 시간동안 기다린 후 지정된 명령을 실행 시키는 매우 독특한 기능을 가지고 있다.
- setInterval() : 함수 밖에다 써야 무한반복
: setInterval() 메소드는 일정한 간격을 두고 명령을 주기적으로 실행시키고자 할 때 사용되는 것으로 setTimeout()의 경우에는 지정된 명령을 일정한 시간이 지난 후에 오직 한번만 실행시켜 주기 때문이다.
: 시간을 계속해서 보여주는 경우에는 setTimeout()을 계속해서 설정하는 것보다 이 메소드를 사용하는 것이 더 나을 것이다.
- innerText : 중요
: DIV나 SPAN, H1 같은 요소에만 적용되고 HTML의 텍스트 형태를 문서에 삽입하도록 한다.
:<span id = liveclock style = "LEFT: 140px; POSITION: absolute; TOP: 30px width=40px"></span>
: style을 이용해서 영역을 분류하고, 그 영역을 liveclock으로 선언.
- IntervalTest.html 소스 (setInterval())
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function showTime(){
var today = new Date();
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
var mytitle = '현재 시간은 '+hour+'시 '+minute+'분 '+second+'초입니다.';
document.title = mytitle;
}
setInterval("showTime()",1000); // 함수 밖에 선언
</script>
<H2> 브라우저의 타이틀 바에 실시간을 표시합니다. </H2>
</body>
</html>
- 결과
- IntervalTest.html 소스 (setInterval())
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function showTime(){
var today = new Date();
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
if(second <= 9)
second = '0' + second;
if(minute <= 9)
minute = '0' + minute;
if(hour <= 9)
hour = '0' + hour;
var mytime = hour + '시 ' + minute + '분 ' + second + '초';
document.rclock.rtime.value = mytime;
}
setInterval("showTime()", 1000); // 일정한 간격을 두고 명령을 주기적으로 실행 (함수 밖에서 호출해야 무한반복)
</script>
<!-- mytime의 value 값을 rtime에 저장해놨으므로 rtime에서 시간을 가져온다. -->
<form name = "rclock">
<p align = "center"><input type = "text" name = "rtime" size = "12"></p>
</form>
</body>
</html>
- 결과
- TimeLayerTest.html 소스 (innerText)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function showTime(){
var today = new Date();
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
if(second<=9)
second = '0' + second;
if(minute<=9)
minute = '0' + minute;
if(hour<=9)
hour = '0' + hour;
var mytime = hour + '시 ' + minute + '분 ' + second + '초';
if (document.layers)
document.layers.liveclock.document.write(mytime);
else if (document.all)
liveclock.innerText = mytime
}
setInterval("showTime()", 1000);
</script>
<span id = liveclock style = "LEFT: 140px; POSITION: absolute; TOP: 30px width=40px"></span>
</body>
</html>
- 결과
