기록하는 개발자

[VanillaJS] Google Chrome App Momentum 만들기 - 2. Clock 본문

Web/Javascript

[VanillaJS] Google Chrome App Momentum 만들기 - 2. Clock

밍맹030 2021. 8. 3. 15:16
728x90

 만들고자 하는 시계의 모양이다.

여기서 필요한 것은 기본적으로 제공되는 Date 객체의 hours, minuteds, seconds 함수는 

시, 분, 초가 10보다 작은 경우 01, 02가 아닌 1, 2 와 같이 한 자리로 표시된다는 것이다.

따라서 아래 스크린샷처럼 00:00:00 형식으로 표시되도록 조치를 취해주어야하는 것이 포인트이다.

< HTML >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet", href="css/style.css">
    <title>Momentum</title>
</head>
<body>
    <!--input의 유효성 검사를 작동시키기 위해서는 form 태그를 사용해야한다.-->
    <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:00</h2>
    <h1 class="hidden" id="greeting"></h1>
    <br>
    
    <script src="js/greetings.js"></script>
    <script src="js/clock.js"></script>

</body>
</html>

< Clock.js >

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); //1000ms = 1s

 

< getClock() 함수 >

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}`;
}

 

 - padStart 함수를 통해 00:00:00 형식을 맞춰준다.

 - padStart 함수를 사용하기위해 String을 받아와야 한다.

   그러나 date 객체로부터 받아오는 getHours, getMinutes, getSeconds 함수의 반환 type이 정수이므로

   'String()' 을 통해 문자열로 형변환 시켜준다.

 

string1.padStart(n, "s");

- string1의 길이를 n으로 보장→한다.
    만약 n보다 짧을 경우 맨 앞에 s를 길이가 n이 되는 개수만큼 붙여준다.

ex) "1".padStart(2, "0");  →  "01"
ex) "hello".padStart(10, "x");  →  "xxxxxhello"

 

string2.padEnd(n, "s");

- string1의 길이를 n으로 보장한다.
    만약 n보다 짧을 경우 맨 뒤에 s를 붙여준다.

ex) "1".padEnd(2, "0"); -> "10"
ex) "hello".padEnd(10, "x");  →  "helloxxxxx"

 

< 함수 실행 부>

getClock(); 
setInterval(getClock, 1000); //1000ms = 1s

 - setInterval 함수만 호출하면 html에 00:00:00로 초기화가 되어있으므로

    화면에 1초간 00:00:00 이 보여진 후 1초 뒤에 setInterval 함수가 작동하여 현재 시간이 표시된다.

   

- 따라서 초기값 표시 없이 처음부터 현재 시간을 표시하기 위해

    setInterval 함수 호출 전에 getClock()을 1회 먼저 호출하여 처음부터 현재 시각이 뜨도록 한다.

 

setInterval(fun, n);

- 함수 fun을 n milliseconds 마다 호출한다.
- 1000ms = 1s 

ex ) setInterval(getClock, 1000); 
        → getClock 함수를 1초에 한 번씩 호출한다.

 

728x90
저작자표시

'Web > Javascript' 카테고리의 다른 글

[VanillaJS] Google Chrome App Momentum 만들기 - 3-2. Random Background Image  (0) 2021.08.03
[VanillaJS] Google Chrome App Momentum 만들기 - 3-1. Random Quotes  (0) 2021.08.03
[Vanilla JS] Google Chrome App Momentum 만들기 - 1. Log In  (0) 2021.08.02
[JavaScript] JS Event 처리(onClick)  (0) 2021.08.02
[JavaScript] js 에서 html의 element 사용하기  (0) 2021.07.28
'Web/Javascript' Related Articles more