반응형
window 객체
window 객체는 현재 웹 브라우저의 창이나 탭을 표현하기 위한 객체로, 비표준 객체이다.
window 메소드의 종류는 많지만, 그 중 타이머(timer) 메소드에 대해 알아보자
| 메소드명 | 설명 | 문법 |
| setTimeout() | 일정시간이 지난 후 매개변수로 제공된 함수를 실행 | const 상수명 = setTimeout(함수명, 시간); |
| setInterval() | 일정 시간마다 매개변수로 제공된 함수를 실행 | const 상수명 = setTimeout(함수명, 시간); |
| clearTimeout() | setTimeout()에서 실행된 함수를 취소 | clearTimeout(setTimeout의이름); |
| clearInterval() | setInterval()에서 실행된 함수를 취소 | clearInterval(setInterval의이름); |
이 함수를 이용하여 시계 프로그램을 만들어보자 (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
[풀이]
<body>
<h2>시계⏰</h2>
<div id="result"></div> // 시간을 넣을 공간
<script>
'use strict';
function clock(){ //clock() 메소드
const date = new Date(); //date 객체 생성
document.getElementById('result').innerHTML = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
//id가 result인 Element에 해당 내용 삽입 = date객체에서 받아온 시:분:초
}
function StopClock(){ //시계 종료 메소드
console.log('시계 전원 끄기');
clearInterval(clockOn); //clockOn 종료
}
const clockOn = setInterval(clock,1000); //1초마다 date객체에서 시분초 받아오기
</script>
<button onclick="StopClock()">시계 전원 끄기</button> // 버튼이 눌리면, stopClock() 메소드실행
</body>
[결과]
시계⏰
시계전원 끄기를 눌러 보세요 !
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
반응형
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 15 문서객체모델(DOM) (0) | 2021.07.08 |
|---|---|
| 14 주민등록번호 유효성 체크 프로그램을 만들어 보자 (1) | 2021.07.04 |
| 12 Math 객체, String 객체, Date 객체 (0) | 2021.07.02 |
| 11 자바스크립트의 변수의범위와 객체 (0) | 2021.06.26 |
댓글