[JavaScript] 시계 만들기

첫 자바스크립트 게시물은 시계만들기 !

시계를 만들기 위해선

 

1. 화면에 시계가 나와야함

2. 시계가 실시간으로 계속 올라가야함

우선 결과물부터 보도록 하자

짜잔 CSS는 따로 적용을 안해서 그냥 하얀 바탕에 시계만 나와있다.

그리고 실제로는 시간 가는중임 ㅎㅎ 동영상 찍는법을 몰라서 ..

우선 html 파일의 body 태그에

div 와 h1을 넣어주었다 저 h1 안에 실질적인 시계가 들어가게 될 것이다.

div 태그의 class 는 js-clock 을 주었다

시계 역할을 해줄 파일은 

script 태그로 clock.js 란 이름으로 링크해놓음

clock.js 파일

나는 js 파일의 맨 처음에 init 함수를 만들어주는 편이다 

편하다 나름

실질적으로 실행되는 아이들을 여기에 넣어준다

clock.js 의 전체 소스

1. 화면에 시계 출력 부분

querySelector 을 이용해 HTML 파일에 만들어 뒀던 div 와 h1 을 불러왔다

function GetTime 을 만들어줬다 (시간을 가져오고 HTML 에 넣어주는 역할을 할거임)

Date 객체를 생성해준다 (line 5)

date,minute,second 를 불러오기 위해 변수를 만들어주고

date.getDate,getMinute,getSecond 를 이용해 각각을 불러온다

이 밖에도 Date() 에는 많은 내용이 있으니 상황에 맞춰 필요한 애들을 불러서 오면 된다

위에서 h1 태그를 불러온 clock 에 innerHTMl 을 할거다 

innerHTML

HTML 의 내용을 바꿔준다. 하지만 기존내용에서 덮어씌워지는 형식이니 주의

원래는 h1 부분이 비어있었지만 innerHTML 을 이용해 시 , 분 , 초 를 넣어줄 것이다. 여기까지 만들고 

init() 에 GetTime();을 넣고 새로고침을 하면

현재 시간이 나오는 움직이지 않는 시계가 출력될것이다 !

물론 새로고침 계속해주면 움직이긴 할거다

2. 시계가 실시간으로 작동

setInterval()

함수를 사용할거다 ! 간단하게 설명하면

calls a function repeatedly, with a fixed time delay between each call to that function

(함수를 반복적으로 호출한다, 함수의 호출과 호출사이엔 고정된 지연 시간이 있다)

사용할땐 setInterval(함수,딜레이) 

-이때 딜레이는 밀리세컨 단위라서 1초 단위로 호출하고 싶으면 1000 을 넣어주면 된다

나는 GetTime(시간을 불러오는 함수) 를 1초 단위로 불러오고 싶으므로 

setInterval(GetTime,1000); 을 써준다

?그 위의 GetTime 은 왜 들어가나요 ?

=페이지가 처음 시작되었을때 현재 시간을 출력해주기 위해 (이거 없으면 화면에 아무것도 안나오다가 1초 뒤에 시간나옴)

그럼 시계 완성 안녕 ~ 다음에는 사용자의 이름 저장하는거를 만들어볼거임