[JavaScript]Date 객체, setInterval, setTimeout: 시간 나타내기
오늘은 웹 페이지에 시간을 나타내볼게요.
먼저 index.html과 clock.js 파일을 만든 뒤, html 문서의 <body> 내부에 다음과 같이 작성해주세요.
<body>
<!--clock-->
<h2 id="clock">00:00:00</h2>
<script src="./js/clock.js"></script>
</body>
1. setInterval & setTimeout
(1) setInterval(함수, 주기(ms))
setInterval 인자로 들어가는 함수를 주기마다 반복해주는 함수입니다.
//콘솔창에 5초에 한 번 씩 "hello" 출력
function test(){
console.log("hello");
}
setInterval(test, 5000);
//함수에 인자가 필요할 때
function test2(str){
console.log(str);
}
setInterval(function(){
test("hello");
}, 5000);
(2) clearInterval(인터벌 함수)
clearInterval 함수는 현재 진행되고 있는 인터벌 함수를 중단시켜주는 함수입니다.
let interval = setInterval(function() {
console.log("hello");
}, 5000);
clearInterval(interval);
(3) setTimeout(함수, 시간(ms))
setTimeout 함수는 일정 시간이 지난 후 인자로 받은 함수를 한번 실행해주는 함수입니다.
//콘솔창에 5초 뒤에 한 번 "hello" 출력
function test(){
console.log("hello");
}
setTimeout(test, 5000);
2. Date 객체
Date 객체는 날짜와 시간에 관련된 메서드를 제공해주는 객체입니다.
//Date 객체 선언
const date = new Date();
오늘은 시간을 나타낼 것이기 때문에 시, 분, 초를 가져올 수 있는 메서드 세개만 볼게요.
다른 메서드는 아래 링크를 가면 확인하실 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
- 시, 분, 초 가져오기
const date = new Date();
const hours = date.getHours(); //0~24
const minutes = date.getMinutes(); //0~60
const seconds = date.getSeconds(); //0~60
3. 시간 나타내기
자 이제 위 지식들로 페이지에 시간을 나타내볼게요.
현재 페이지에는 다음과 같이 index.html에 작성한 대로만 나옵니다.
자바스크립트로 이 텍스트를 동적으로 움직이는 것처럼 만들어야겠죠?
const clock = document.querySelector("h2#clock");
function getClock() {
const date = new Date();
const hours=String(date.getHours()).padStart(2, "0");
const minutes=String(date.getMinutes()).padStart(2, "0");
const seconds=String(date.getSeconds()).padStart(2, "0");
clock.innerText = `${hours}:${minutes}:${seconds}`; //텍스트 변경
}
getClock();
setInterval(getClock, 1000); //1초마다 반복
위 코드의 getClock() 함수는 setInterval 함수에 의해 1초에 한 번씩 동작합니다.
그러면 1초에 한 번씩 clock의 텍스트가 현재의 시:분:초로 변경됩니다.
여기서! padStart() 메서드는 무엇일까요?
만약 현재 시간이 1시 5분 10초라고 합시다.
우리의 목표는 시간을 01:05:10 으로 표시하는 것입니다. 때문에 padStart() 메서드를 사용한 것인데요!
[ padStart ]
padStart 메서드는 String 객체가 제공하는 메서드입니다.
사용법은 문자열.padStart(number, string) 입니다.
문자열의 길이가 number보다 작다면 문자열 앞에 string을 추가하는 동작을 합니다.
예를 들어 "1".paddStart(2, "0") 을 하면 문자열 "1"은 "01"로 바뀝니다
앞서 말했듯이 padStart의 객체는 String입니다. date.getHours(), date.getMinutes(), date.getSeconds()는 숫자 타입이므로 String 타입으로 변경한 뒤 padStart를 수행해야합니다.
위 코드를 작성하셨다면 시간이 잘 나타납니다. ㅎㅎ