자바스크립트로 웹페이지를 구현하다 보면 시간에 따라 동작하는 효과를 만들게 되는 경우가 있다.
그런 경우에 사용하게 되는 타이머 설정 함수가 setTimer이다.
setTimer
- 지금부터 지정한 시간 뒤에 딱 한번 동작
- setTimer
- setTimer(동작 시킬 함수, 시간);
- setTimer(pro, 5000);
- 5초 뒤에 pro 함수를 1번 동작하라는 것
- setTimer(function( ) { 함수내용 } , 5000);
- 안에 이름 없는 함수를 넣어서 할 수 있다.
ㅁ 지정한 시간마다 반복하여 계속 동작
- setInterval
- setInterval(동작 시킬 함수, 시간);
- setInterval(pro, 5000);
- 5초 마다 pro 함수를 동작하라는 것\
적용하는 방법
- 직접 주는 것, <body onload="setInterval(pro,1000)">
- 별도의 함수를 만들어서 setInterval( ) 를 넣어도 됨
- 해당 함수를 이름 없는 함수로 만들어서 setInterval( ) 넣기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var pro = function() {
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth()+1;
var date = today.getDate();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
var str = year +"년 ";
str += month+"월 ";
str += date+"일 ";
str += hours+"시 ";
str += minutes+"분 ";
str += seconds+"초 ";
document.getElementById("dateArea").innerHTML = str ;
}
</script>
</head>
<body onload="setInterval(pro,1000)">
<h2>현재시간 : <span id="dateArea"></span></h2>
</body>
</html>
반응형
'Java Script > Java Script' 카테고리의 다른 글
| JS 예제 : 접근 기기(데스크탑 / 모바일)에 따른 배경 변경 (0) | 2019.05.11 |
|---|---|
| JS 예제 : 시간에 따라 이미지 변경( 낮과 밤) (0) | 2019.05.11 |
| JavaScript 이벤트 ㅣ window.onload (0) | 2019.05.11 |
| JavaScript 함수 만드는 방법 (0) | 2019.05.11 |
| JavaScript DOM : 문서 동적화 (0) | 2019.05.11 |
댓글