[자바스크립트] 바닐라자바스크립트를 이용하여 시계 만들기

 

일단 2종류의파일이 필요함

1. index.html

2. clock.js

 

 

 

1) 첫번째 index.html 파일에 노란색 부분을 작성한다.

-> html 영역과 js 파일을 연결해주는 것

 

 

2) js 파일 작성해주기

① 1~2번째라인

clockContaniner를 생성해주고 거기에 div js-clock를 연결해준다.

div js-clock 영역 안에 있는 h1 js-title을 clockTitle을 생성해주고 연결 

② 12번째라인

function init() 일단 만들어주고

 

③ 4번째 라인

getTime 함수를 만들어준다.

 

④ 5~8번째 라인

만든 getTime 함수 안에 날짜 객체?를 생성해주고나서 그 객체 안에 있는 분/시간/초를 따로따로 저장시켜준다. 

⑤ 9번째라인

마지막으로 clockTitle에 innerText라는 속성을 이용하여 00:00 대신에 진짜 시간이 들어갈 수 있게 해준다.

Tip) innerText= 쓰고 나서 '' 작은 따옴표가 아닌 `` 이거임!!

 

⑥ 13~15번째라인

init 함수에 getTime을 넣어 실행시키면 초단위로 바뀌는 시간이 아닌 멈춘 시간이 나오는데

그걸 초단위로 움직이게 하기 위해서는 setInterval 함수를 써야함

 

setInterval 함수

setInterval(function() { ... }, 지연시간);

setInterval(function() { 실행시키고자 하는 함수 }, 지연시간);

setInterval(function() { getTime() }, 1000);

여기서 1000은 1초마다 변하는 것을 뜻함

 

⑦ alt+l+o 를 눌러 실행시켜본다.

완성!!