Timer메서드란,
타이머 메서드들에 대하여 어느정도 정리를 해봤습니다.
| 메소드 | 설명 |
| setTimeout(funtion, millisecond) | 일정 시간 후 함수를 한 번만 실행 |
| setinterval(function, millisecond) | 일정 시간 마다 함수를 반복해서 실행 |
| clearTimeout(id) | 일정 시간 후 함수를 한 번 실행하는 것을 중지 |
| clearlnterval(id) | 일정 시간마다 함수를 반복하는 것을 중단 |
위의 내용들을 가지고 충분히 사용할 수 있습니다.
문제1)
"보입니다"라는 글을 1초마다 출력되다가 10초가되면 타이머가 종료되도록 프로그램을 만드세요.
우선, div태그를 통해서 한 줄에 출력될 공간을 만들어줘야됩니다.
그리고나서, 임의의 함수를 만들어줘야겟죠? 함수안에서 어떠한 내용을 출력할 것인지를 innerHTML합니다!!
이때, 값이 덧붙여지지않고 누적되도록 +=를 합니다.
함수밖에서는 setInterval메서드(timer함수에서, 1초마다) 실행하도록 작성했습니다.
그리고 setTimeout메서드(익명함수를 통해서 setInterval를 중지시킵니다, 10초뒤에 한 번만)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body>
<div style='background:yellow' id='here'></div>
<script>
function timer(){
var b = document.getElementById('here');
b.innerHTML+="<h1> 보입니다 </h1>"
}
var t= setInterval(timer, 1000);
setTimeout(function(){clearInterval(t)}, 10000)
</body>
|
더보기
<코드결과>
진행과정은 아래와 같습니다. 보입니다가 10개가 나오면 출력이 종료가 됩니다.
문제2)
시:분:초를 실시간으로 업데이트되도록 (=1초마다 현재시간변경되도록) 프로그램 만드세요.!
우선, 이번에도 div태그를 통해서 한 줄에 출력될 공간이 필요할 거 같아요.
그리고나서, 임의의 함수를 만들어줘야겟죠? 함수안에서 어떠한 내용을 출력할 것인지를 innerHTML합니다.!!
이때, 값이 덧붙여지도록 =를 합니다.
함수밖에서는 setInterval메서드(timer함수안에서, 1초마다) 실행하도록 작성했습니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<body>
<div style='background:yellow' id='here'></div>
<script>
function timer(){
var a = new Date();
var b = document.getElementById('here');
b.innerHTML=a.getHours()+":"+a.getMinutes()+":"+a.getSeconds()+"<br>";
}
var m = setInterval(timer, 1000);
</script>
</body>
|
더보기
<코드결과>
진행결과는 아래와 같습니다. 매 초마다 계속 바뀌는 현상을 볼 수 있습니다.
추가적으로 앞전에 배웠던 게시판문제와 타이머를 이용해서 다음과 같은 문제를 풀었습니다.
크게 달라진 코드는 없기
때문에 참고용으로 추가하겠습니다. 20번부터 27번 코드를 보시면 기존의 게시판코드에서 5회범위안에서 5초주기로 5번 반복을 포문과 타이머를 이용해서 표현하였습니다. +=tr를 통하여 1000*i(=1*i초)마다 행이 저장되는 것도 꼭 분석해서 이해하고 넘어가시기를 바랍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!-- 지역변수로만 이용 -->
<body>
<h1>게시물 출력</h1>
<table id='here'>
<script>
var count=0;
function inputBoard() {
var board = prompt("번호:제목:작성자:조회수 형식");
var boardArr = board.split(":");
return boardArr;
}
function boardTR(b) {
var resultTR = "<tr>";
for ( var i in b) {
resultTR += "<td>" + b[i] + "</td>";
}
resultTR += "</tr>";
return resultTR;
}
//답(2) - 5초주기로 5번반복
for(var i=1; i<=5; i++){
setTimeout(
function(){ var boardArr = inputBoard();
var tr = boardTR(boardArr);
document.getElementById("here").innerHTML+=tr; }, 1000*i
)
}
</script>
</table>
</body>
|
'WEB 기초 > Script' 카테고리의 다른 글
| 15. 예외처리란, (0) | 2018.04.12 |
|---|---|
| 14. 배열 객체 연습 (0) | 2018.04.12 |
| 12. 객체란? (0) | 2018.04.12 |
| 11. Date를 이용한 도서 반납 프로그램 (0) | 2018.04.12 |
| 10. 임의의 수를 찾는 프로그램 (0) | 2018.04.12 |