Javascript에서 시계 만들기

rakkoon23·2020년 4월 18일
0

노마드코더-Vanilla JS

목록 보기
11/16

노마드 코더님의 자바스크립트 강의를 보고 정리한 글입니다.

index.html

  • 같은 클래스를 가지고 CSS와 js에서 모두 쓰고 싶다면, "js-clock"과 같은 방식으로 선언하는 것도 좋다.
<!DOCTYPE html>
<html>
    <head>
        <title>Something</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <div class="js-clock">
            <h1></h1>
        </div>
        <script src="clock.js"></script>
    </body>
</html>

clock.js

  • innerText 메소드 : 객체 안에 텍스트를 넣을 때 사용.
  • getHours, getMinutes, getSeconds
  • setInterval : 특정 함수를 일정 시간 간격으로 실행(시간 단위 : 밀리세컨드).
const clockContainer = document.querySelector(".js-clock"),
clockTitle = clockContainer.querySelector("h1");

function getTime(){
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    clockTitle.innerText = `${hours}:${minutes}:${seconds}`;
}

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

미니 조건문 넣기

  • 위 코드의 문제점은, 시간, 분, 초가 한자리수가 되면, 01이 아닌 1만 나온다는 것이다.
  • 이를 해결하기 위해 자바스크립트의 미니 조건문을을 썼다.
  • 미니 조건문 사용법
    • condition ? block(true) : block(false)
clockTitle.innerText = `${hour < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
profile
모빌리티 스타트업에서 데이터를 다루고 있습니다.

0개의 댓글