타이머 만들기 / setInterval / setTimeout /clearInterval
< 타이머 >
: 이벤트가 처리되는 타이밍
1) 사용자 호출 즉각 실행
2) 이벤트 처리기 등록 - 이벤트 발생시 마다 (onclick)
3) 10분후 1번만 / 1분에 1번씩 타이머 설정 <= 타이머 기능
< setInterval >
let timer1 = setInterval( 함수, 1/1000초시간 );
- 시간간격마다 함수 실행 ( 무한반복 )
< clearInterval >
setInterval 가 걸린 함수를 timer1 변수에 담고,
function(){clearInterval( timer1 );}
: timer1 에 걸린 Interval을 clear 하고 정지시키겠다.
setTimeout( function(){clearInterval( timer1 )}, 10000);
: 10초후에 정지시키겠다.
<setTimeout>
setTimeout( 함수, 1/1000초시간 );
- 시간 다 경과되면, 함수 한번 실행
=> 이제 날짜랑 innerHTML, value 사용해서 타이머 만들어보자.
[ 날짜 시간 JS ]
let now = new Date( );
- 현재 날짜정보
document.write(now);
-Wed Jul 27 2022 15:46:06 GMT+0900 (한국 표준시)
document.write(now.toLocaleString() );
2022. 7. 27. 오후 3:46:06
document.write(now.toLocaleDateString() );
2022. 7. 27.
document.write(now.toLocaleTimeString() );
오후 3:46:06
[ .innerHTML ]
<div> 여기부분 </div>
- 이 중간에 입력하는 부분을 innerHTML이라고 부름
<div id="result1"> 이너내용 </div>
document.getElementById("result1").innerHTML
- id로 가져온 div 에서 InnerHTML 부분을 지칭
=>이용해서 수정하기 (대입)
document.getElementById("result1").innerHTML = 그 부분에 '새로운 내용'; 대입
document.getElementById("result1").innerHTML =
document.getElementById("user_input").value;
: input 입력값을 대입
=> innerHTML 자리에 집어 넣는것이기 때문에, 대입시킬때
document.write 를 할 필요가 없다.
( innerHTML 자리에 넣는다는건, 값이 자동으로 웹에 출력 되는 것 )
[ .value ]
: 값을 가지는 태그들의 value 가져오기
<input id= "" name="" value="">
- input 일때는 value 초기값, 사용자의 입력값이 value로 들어오므로
document.getElementById("").value
=> 사용자가 입력한 value값 뽑아짐
- textarea 일때는 특이
<textarea id="" name="" value=""> 여긴InnerHTML </textarea>
- 사이에 들어가는건 InnerHTML 으로, 개발자가 넣어둔 값. 고정적임
- value 는 웹에서 사용자가 입력으로 넣은 값이 value 로 들어감.
=> 둘다 뽑아지긴하는데, 내용이 개발자가 넣어둔거냐, 사용자 입력값이냐 차이
.value - 사용자 입력값
.InnerHTML - 개발자 넣어둔거
그 외에, select / radio 태그면 고른 값이 value로 들어가고
거의 다 value 값을 가진다고 보면 됨.
=> 그걸 뽑는게 .value 함수
[ 시계 만들기 ]
- setInterval ( 함수형태, 시간 );
=> 의미 : 함수가 시간마다 계속 반복해서 실행된다.
즉, onclick 이벤트 걸어둔 function에
setInterval 을 넣으면 그 안에 함수가 반복 실행 되는 것
- 변수선언 scope 생각해서 사용 ( 함수 안에 선언하면 다른 함수에서 못가져옴)
(1) onclick 버전 (기초)
<input type="button" value="시계" onclick="f1( )" >
<script>
function f1( ){
setInterval( function(){
let now = new Date();
document.write(now.toLocaleString() + "<br>"); }, 1000) ;
}
</script>
(2) DOM 버전 + innerHTML + stop 기능
<input id="clock" type="button" value="시계">
<input id="stop" type="button" value="중단">
<div id="here">시간 출력 영역 </div>
<script>
let timer; // scope 생각해서 밖으로 빼둬야 stop 에서 사용 가능
document.getElementById("clock").onclick = function(){
timer = setInterval(function(){
document.getElementById("here").innerHTML = new Date().toLocaleTimeString();
}, 1000);
}
=> Date에서 시간뺀 값을 div "here" 의 innerHTML 영역에 넣겠다.
=> 그 함수를 setInterval 1000간격으로 실행하는 함수다. ( timer변수에 넣어두겠다. )
=> 이 함수는 "clock"아이디의 버튼을 onclick 클릭했을시 실행된다.
//stop기능
document.getElementById("stop").onclick = function(){
clearInterval(timer);
}
=> stop 버튼 클릭하면 위에서 정의한 timer 의 interval 반복을 없애겠다. clearInterval
</script>
- 이벤트처리결과를 어느 위치에 표시를 해줘야 한다.
=> div에 아이디하나 주고, 거기에 이벤트처리결과를
.innerHTML 에 대입시켜 표시.
=> 계속 그자리에 새 값이 출력되면서, 마치 시계처럼 보여지는 것
---