바닐라 JS로 크롬 앱 만들기 #5 CLOCK

JYUN(sia) 2024. 1. 15. 10:08

함수 정리

date.getHours() : number
String(date.getHours()) : String
"String".padStart(2,"0") : 2글자가 아니라면 앞에 "0" 추가
"String".padEnd(2,"0") : 2글자가 아니라면 뒤에 "0" 추가

코드

app.js 파일명을 greetings.js 로 바꾸고 clock.js 추가.

greetings는 동일하므로 clock 코드 파일만 추가함

<!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">
    <title>Mumentum App</title>
</head>
<body>
    <form class = "hidden" id = "login-form">
        <input 
        required
        maxlength="15"
        type="text" 
        placeholder="What is your name?"
        /> 
        <button>Log In</button>
    </form>
    <h2 id="clock">00:00</h2>
    <h1 id = "greeting" class = "hidden"></h1>
    <script src="js/greetings.js" ></script> //js폴더 안의 greetings.js파일임을 나타냄
    <script src="js/clock.js" ></script>
</body>
</html>

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(); // 즉시 1번 실행
setInterval(getClock, 1000); // 매 1초마다 함수 실행