Home 그 유명한 to do list 시작! - 시계만들기
Post
Cancel

그 유명한 to do list 시작! - 시계만들기

시계 만들기

html 파일 수정

이제 모멘텀 extension을 만들기위해 알아야할 문법은 다 배웠으니 실전에 들어가보도록 하자. 우선 html 파일에서 시계가 오는 위치를 정하자.

1
2
3
4
5
6
7
8
9
<body>
  <div class="js-clock">
    <!-- 시계가 들어갈 클래스를 생성하였다. -->
    <h1>00:00</h1>
  </div>
  <script src="clock.js"></script>
  <!-- 시계를 구현하는 자바스크립트 파일을 새로이 또 추가한다. 항상 나누어서 작업하면 깔끔하고 충돌도 덜
    일어난다. 이러한 작업태도를 'divde and concour' 라고 한다. -->
</body>

Clock.js 파일 생성(분업화)

그리고 clock.js 란 파일을 만들어준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const clockContainer = document.querySelector(".js-clock"); // 앞서 생성한 시계 클래스를 선택하고
const clockTitle = clockContainer.querySelector("h1"); //시계 클래스의 child인 h1태그를 세부선택한다. 이렇게 따로따로 지정해놓으면 선별 작업하기 편리해진다.

function getTime() {
  const date = new Date(); // 시간을 나타내주는 객체이다. 큰 틀을 만들었다.
  const minutes = date.getMinutes(); //분
  const hours = date.getHours(); // 시
  const seconds = date.getSeconds();
  clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${
    minutes < 10 ? `0${minutes}` : minutes
  }:${seconds < 10 ? `0${seconds}` : seconds}`; // ternary operator(삼항연산자) 라고 하고 미니if 라고 읽는다. seconds,minutes,hours 가 10미만이면 0%{seconds} 이고 아니면 그대로 출력한다. --0이 숫자 앞에 붙어서 나오게 하는 과정.
}

function init() {
  getTime();
  setInterval(getTime, 1000); // 괄호안에 있는 함수를 1초마다 업데이터하는 함수.(1000이라 적은 이유는 백만분의 1이기 때문에) 이 함수가 없으면 그냥 새로고침할때의 시간이 그대로 박제되어있게 된다.
}

init();

//always divide and conquer!
This post is licensed under CC BY 4.0 by the author.