시계 만들기 - JavaScript

오늘은 시계를 만들고 싶어서 알아본 과정에 대해 간단히 정리해보았다.

 

 

 

# HTML

연습용으로 h1태그로 만들어았다.

 

 

 

1. new Date()

 

new Date()를 통해

현재 시간에 대한 정보를 얻을 수 있었다!

 

[ new Date() 실행 결과 ]

 

그 중에

 

new Date().getHours() = 시

new Date().getMinutes() = 분

new Date().getSeconds() = 초

 

이런식으로 시 분 초 각각 따로 얻을 수 있었기에

시계를 만들기에 딱 좋았다.

 

[ new Date().getSeconds 실행 결과 ]

 

[ new Date().getSeconds 반환값이 초마다 바뀌는 모습 ]

 

 

 

2. setInterval() 

setInterval()함수는

setInterval(함수명,실행주기) 이렇게 실행하며 

기능은 해당 함수를 해당 실행주기마다 연속해서 실행해준다.

실행주기는 ms(밀리세컨드)단위다

 

[ setInterval() 코드 예시 ]

 

 

[ setInterval() 코드 예시 실행 결과]

 

1초( 1000밀리세컨드 )마다 계속 작동되는 모습

 

 

 

[ 함수 실행 예시]

new Date()는 반복해서 쓰이니까 변수로 지정하고

h1 태그속에 넣어보았다.

 

이 정도로 실행가능하긴 하지만

 

문제가 하나있다!

 

내가 원했던 시계는

 

00 : 00 : 00 와 같이

 

시간 / 분 / 초  모두 두자릿수로 표기 되길 원했다. 

 

그런데

 

[ new Date().getSeconds 실행 결과 ]

 

위와 같이 한자릿수에서 그대로 한자릿수만 나오는 문제가 있다

17:11:1 < 이런느낌.. 

나는

17 : 11 : 01 < 이걸 원한다..

 

그래서 더 알아봤다.

 

3. padStrart()

padStrart()는  String타입에 대해

1. 맨 앞자리부터 원하는 자릿수만큼

 

2. 그 자릿수 공백에는 뭘 넣을건지

 

두가지를 넣어주면 해결해주는 함수이다.

 

padStrart(원하는 자릿수, 공백에 뭘 넣어줄지)

 

ex) padStrart( 2, "0") 

 

[ padStrart( )    실행 결과 ]

 

두 자릿수 채워진 모습

 

[ padStrart( ) 적용 모습]

String타입에 적용 가능하기에 이런식으로 한줄에다 하나하나 수작업 해주는 방법이 있고

 

그리고

[ 변수쪽에 String()에 묶어서 넣어주는 형태 ]

 

이런식으로도 같은 결과가 나왔다.

 

[ 실행 결과 ]

 

 

[시계 완성 ]

 

여러가지 궁금한것들을 만들어보고 싶은것들

검색을 통해

만들어보면서 많이 배워야겠다!