박시은

(❁´◡`❁)

1 분 소요


아래 4가지를 사용하여 디지털 시계를 만들어 보자!


▶ HTML / CSS

먼저 HTML과 CSS를 통해 아래와 같이 UI를 구성하였다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>디지털 시계</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="display-clock">
        <div id="time"></div>
      </div>
      <div>
        <button id="stop">STOP</button>
        <button id="go">GO</button>
      </div>
    </div>

    <script src="script.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("https://images.unsplash.com/photo-1512389142860-9c449e58a543?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-position: center;
  background-size: cover;
}
.display-clock {
  color: rgb(8, 85, 68);
  border: 2px rgb(8, 85, 68) solid;
  font-size: 35px;
  padding: 10px 30px;
  margin: 30px;
  border-radius: 10px;
}
button {
  border: 0;
  background-color: transparent;
}
#stop {
  border: 1px solid black;
  border-radius: 10px;
  padding: 3px 10px;
  background-color: rgb(129, 35, 35);
  color: white;
}
#go {
  border: 1px solid black;
  border-radius: 10px;
  padding: 3px 10px;
  background-color: rgb(129, 35, 35);
  color: white;
}



▶ JavaScript

▷ 변수 선언

let handleId = 0; // 동작에 대한 id 저장
const time = document.getElementById("time");
const go = document.getElementById("go");
const stop = document.getElementById("stop");
  • handleId 변수
    • setInterval 함수로 생성된 타이머의 식별자(ID)를 저장하는 변수이다.
    • 여러 setInterval 함수가 실행될 때 각각의 타이머에 고유한 ID가 부여되는데, 이 ID를 handleId에 저장한다.
    • setInterval 함수는 타이머의 ID를 반환하며, 이 ID가 handleId에 저장된다.


▷ getTime()

현재 시간을 읽어오는 함수 《 [JS] Data 객체 활용하기 》

date 객체 생성 후 시간에 대한 정보를 가져오는 메소드를 사용해 시, 분, 초를 가져온다.

function getTime() {
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const secondes = date.getSeconds();
  const showTime = `${hours}시 ${minutes}분 ${secondes}초`;
  time.textContent = showTime;
}

getTime();


▷ go.onclick

go.onclick = function () {
  if (handleId == 0) {
    handleId = setInterval(getTime, 1000);
  }
};


▷ stop.onclick

stop.onclick = function () {
  clearInterval(handleId);
  handleId = 0;
};


▷ 전체 코드

let handleId = 0;
const time = document.getElementById("time");
const go = document.getElementById("go");
const stop = document.getElementById("stop");

function getTime() {
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const secondes = date.getSeconds();
  const showTime = `${hours}시 ${minutes}분 ${secondes}초`;
  time.textContent = showTime;
}
getTime();

go.onclick = function () {
  if (handleId == 0) {
    handleId = setInterval(getTime, 1000);
  }
};
stop.onclick = function () {
  clearInterval(handleId);
  handleId = 0;
};



📎참조

  • https://www.youtube.com/watch?v=QqllEXgy1UY&t=381s

카테고리:

업데이트:

댓글남기기

참고