영벨롭 개발 일지

[JavaScript]Date 객체, setInterval, setTimeout: 시간 나타내기 본문

Programming Language/JavaScript

[JavaScript]Date 객체, setInterval, setTimeout: 시간 나타내기

영벨롭 2022. 3. 20. 19:06

 오늘은 웹 페이지에 시간을 나타내볼게요.

 

먼저 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를 수행해야합니다.

 

위 코드를 작성하셨다면 시간이 잘 나타납니다. ㅎㅎ

반응형
저작자표시 비영리 변경금지

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript]자바스크립트 이벤트 event : 이벤트 리스너, 이벤트 종류, preventDefault  (0) 2022.04.15
[JavaScript]Math 객체 다루기: min, max, random, round, ceil, floor  (0) 2022.03.20
[JavaScript]Form에 이름을 입력 한 뒤, 웹 페이지에 표시하기  (0) 2022.03.17
[JavaScript]실행환경, 개발자 도구, 변수 호이스팅  (0) 2022.03.17
[JavaScript]자바스크립트의 데이터 타입 Data Type  (0) 2022.03.15
'Programming Language/JavaScript' Related Articles more