바닐라 JS) 14. 시계 만들기

송민경

Sep 02, 2024

Contents

6. 시간 형태 바꾸기

1. 파일 구조 변경

js, css폴더 생성

js 폴더 내부에 clock.js, greetings.js(app.js의 이름 변경)

css 폴더 내부에 style.css 이동

index.html에 바뀐 경로와 추가된 js 파일 적용하기


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <form class="login-form hidden" id="login-form">
        <input 
            required 
            maxlength="15" 
            type="text" 
            placeholder="What is your name?" />  <!--사용자로부터 값 입력받기-->
        </form>
            <h1 class="hidden" id="greeting" ></h1>
        <script src="js/greetings.js"></script>
        <script src="js/clock.js"></script>
</body>
</html>

h2 추가하기

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <form class="login-form hidden" id="login-form">
        <input 
            required 
            maxlength="15" 
            type="text" 
            placeholder="What is your name?" />  <!--사용자로부터 값 입력받기-->
        </form>
            <h2 id="clock"></h2>
            <h1 class="hidden" id="greeting" ></h1>
        <script src="js/greetings.js"></script>
        <script src="js/clock.js"></script>
</body>
</html>


const clock = document.querySelector("h2#clock");

clock.innerText = "nice to meet you";

2. <h2>00:00 추가하기

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <form class="login-form hidden" id="login-form">
        <input 
            required 
            maxlength="15" 
            type="text" 
            placeholder="What is your name?" />  <!--사용자로부터 값 입력받기-->
        </form>
            <h2 id="clock">00:00</h2>
            <h1 class="hidden" id="greeting" ></h1>
        <script src="js/greetings.js"></script>
        <script src="js/clock.js"></script>
</body>
</html>


const clock = document.querySelector("h2#clock");

2. interval

일정한 시간 간격으로 특정 작업을 반복 실행하기 위해 사용


setInterval(function, delay);

5초마다 sayHello 실행

clock.js


const clock = document.querySelector("h2#clock");

function sayHello() {
    console.log("hello");
}

setInterval(sayHello, 5000); // 5초마다 sayHello 실행

5초마다 자동으로 실행됨

3. timeout

일정 시간이 지난 후에 지정한 함수나 코드를 한 번 실행


setTimeout(function, delay);

clock.js


const clock = document.querySelector("h2#clock");

function sayHello() {
    console.log("hello");
}

setTimeout(sayHello, 5000); // 5초 후에 실행

4. Date

날짜와 시간을 다루기 위한 내장 객체

현재 날짜와 시간을 가져오거나 특정 날짜와 시간을 설정하고, 이를 다양한 형식으로 표현 가능

현재 날짜와 시간


const now = new Date();
console.log(now);

특정 날짜와 시간


const specificDate = new Date('2024-09-01T12:30:00');
console.log(specificDate);

날짜와 시간 가져오기


const now = new Date();
console.log(now.getFullYear());  // 연도 가져오기
console.log(now.getMonth());     // 월 가져오기 (0부터 11까지: 0 = 1월, 11 = 12월)
console.log(now.getDate());      // 일 가져오기
console.log(now.getHours());     // 시각 가져오기
console.log(now.getMinutes());   // 분 가져오기
console.log(now.getSeconds());   // 초 가져오기

날짜와 시간 설정하기


const someDate = new Date();
someDate.setFullYear(2025);   // 연도 설정
someDate.setMonth(0);         // 월 설정 (0 = 1월)
someDate.setDate(15);         // 일 설정
someDate.setHours(10);        // 시각 설정
someDate.setMinutes(30);      // 분 설정
console.log(someDate);

타임스탬프


const timestamp = Date.now();
console.log(timestamp);

5. 시계 만들기

interval 사용하기

1초 후에 처음으로 콘솔에 시간이 출력


const clock = document.querySelector("h2#clock");

function getClock() {
    const date = new Date();
    console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
}

setInterval(getClock, 1000); // 1초마다 실행

getClock()을 즉시 호출

페이지가 로드되자마자 시간을 출력하고, 이후 1초마다 계속해서 시간을 출력


const clock = document.querySelector("h2#clock");

function getClock() {
    const date = new Date();
    console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
}

getClock()
setInterval(getClock, 1000); // 1초마다 실행

date에서 가져온 값 적용하기

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <form class="login-form hidden" id="login-form">
        <input 
            required 
            maxlength="15" 
            type="text" 
            placeholder="What is your name?" />  <!--사용자로부터 값 입력받기-->
        </form>
            <h2 id="clock">00:00:00</h2>
            <h1 class="hidden" id="greeting" ></h1>
        <script src="js/greetings.js"></script>
        <script src="js/clock.js"></script>
</body>
</html>


const clock = document.querySelector("h2#clock");

function getClock() {
    const date = new Date();
    clock.innerText =`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}

getClock()
setInterval(getClock, 1000); // 1초마다 실행

6. 시간 형태 바꾸기

String이 최소 2의 길이 가지기

00:00:00로 표시


"1".padStart(2,"0") // 2자리가 아니면 0 추가하기


const clock = document.querySelector("h2#clock");

function getClock() {
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,"0");
    const minutes = String(date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");
    clock.innerText =`${hours}:${minutes}:${seconds}`;
}

getClock()
setInterval(getClock, 1000); // 1초마다 실행