See the Pen 디지털시계 by yoonbitnara (@yoonbitnara) on CodePen.



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">
  <title>date 객체</title>
</head>

<body>
  <div id="wrap">
    <h1>디지털시계</h1>
    <div id="resArea">
      <div id="clock"></div>
      <div id="calendar"></div>
    </div>
  </div>
</body>

</html>



CSS

div#wrap {
  width: 600px;
  padding: 10px;
  border: 1px solid #000;
  margin: 20px auto;
}
div#resArea {
  width: 300px;
  padding: 30px 50px;
  font-size: 30px;
  border: 1px solid #000;
  background-color: #3b1e1e;
}
#resArea div#clock {
  color: #fff;
  font-size: 42px;
}
#resArea div#calendar {
  color: #08f;
  font-size: 24px;
}



JS

function time() {
  let now = new Date();
  let clock = now.toLocaleTimeString();
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  let date = now.getDate();
  let day = now.getDay();
  let dayTxt = [
    "일요일",
    "월요일",
    "화요일",
    "수요일",
    "목요일",
    "금요일",
    "토요일"
  ];

  let calendar = year + "년 ";
  calendar += month + "월 ";
  calendar += date + "일 ";
  calendar += dayTxt[day];

  document.getElementById("clock").innerText = clock;
  document.getElementById("calendar").innerText = calendar;
}
setInterval(time, 100);

Leave a comment