JavaScript로 크롬 앱 만들기 #12

13973 단어 MomentumCloneCodingJavaScriptJavaScript

노마드 코더 - 바닐라 JS로 크롬 앱 만들기 #12

💻 오늘 실습한 코드

<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Momentum</title>
  </head>
  <body>
    <form id="login-form" class="hidden">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <input type="submit" value="Log In" />
    </form>
    <h2 id="clock">00:00</h2>
    <h1 id="greeting" class="hidden"></h1>
    <script src="js/greetings.js"></script>
    <script src="js/clock.js"></script>
  </body>
</html>
// JavaScript
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);

✔ setInterval

setInterval(function, 1000);
  • setInterval(함수명, 초(ms단위)) : 함수를 정한 시간마다 반복해서 보여준다.

✔ setTimeout

setTimeout(function, 1000);
  • setTimeout(함수명, 초(ms단위)) : 함수를 정한 시간만큼만 보여준다.

✔ Date( )

  • 시간 정보를 보여주는 객체
  • getHours() : 현재 시단위 정보를 가져옴
  • getMinutes() : 현재 분단위 정보를 가져옴
  • getSeconds() : 현재 초단위 정보를 가져옴

✔ padStart( )

  • 그냥 getHours 등을 사용하면 예를 들어 오후 5시 5분 7초를 나타낼 때 17:5:7 이런 식으로 한자리씩 나오게 된다. 깔끔하게 자릿수를 통일하기 위해 padStart를 사용한다.
const hours = String(date.getHours()).padStart(2, "0");
  • 이때 getHours()로 받는 값이 number 형태인데, padStart()는 String 형태로 받아오기 때문에 형변환을 해서 한자리수가 나올 때 앞에 0을 추가하도록 한다.

💻 결과물

같은 기능을 완성하고 다른 인코딩으로 사고하다
(알고리즘) 보이는 학생

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage