[17 Project] Digital Clock

 

 

[새로 알게된 것]

 

getHours

getMins

getSeconds

 

textContent는 innerContent와 비슷하지만 반환 시 여백도 그대로 가져온다. 

 

1. 아직 h = (h < 10) ? "0" + h : h; 를 이해 못했다,, 없어도 잘 돌아가는데 ㅋㅋㅋ 다시 계산해봐야겠다.

 

2. 폰트 적용이 안돼 ~~ 디지털 느낌이면 더 좋을텐데 아숩아숩

 

 

 

[내가 짠 코드]

<!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>Digital Clock</title>
  <style>
    body {
      background: rgb(20, 14, 22);
      font-family: 'Orbitron-Regular';
    }
    #display {
      color: #fff;
      font-size: 5.5em;
      text-align: center;
      margin-top: 35%;
      letter-spacing: 8px;
      text-shadow: 0px 0px 6px rgb(229, 174, 255);
    }
  </style>
</head>
<body>
  <div id="display" onload="showTime()"></div>


  <script>
    function showTime() {

      let date = new Date();
      let h = date.getHours(); //0부터 시작함
      let m = date.getMinutes();
      let s = date.getSeconds();
      let session = " AM";
        
        
      if (h == 0) {

        h = 12;

          if (h > 12) {
          h = h - 12;
          session = "PM";
        }

      }
        let time = h + ":" + m + ":" + s + session;
        document.getElementById("display").innerText = time;
        
        setTimeout(showTime, 1000);
     
    }

    showTime();
  </script>
</body>
</html>