공부/javascript

2022.06.28 - javascript 30 [ day2 ] clock

기묜몬 2022. 6. 28. 15:01

[ 결과물 ]

day2는 transform을 이용하여 시계를 만들었다. 

시계 안에 현재시각도 표현해봤다. 

 

 

[ HTML ]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./clock.css" />
    <title>JS + CSS Clock</title>
  </head>

  <body>
    <div class="nowClock"></div>
    <div class="clock">
      <div class="clock-face">
        <div class="hand hour-hand"></div>
        <div class="hand min-hand"></div>
        <div class="hand second-hand"></div>
        <div class="center"></div>
      </div>
    </div>

    <script src="./clock.js"></script>
  </body>
</html>

 

[ CSS ]

html {
  background: linear-gradient(45deg, #e9f58e 0%, #b9d0e4 50%, #006492 100%);
  background-size: cover;
  font-family: "helvetica neue";
  text-align: center;
  font-size: 10px;
}

body {
  margin: 0;
  font-size: 2rem;
  display: flex;
  flex: 1;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.nowClock {
  color: #083963;
  font-weight: 300;
  width: 100%;
  height: 30%;
  position: absolute;
  font-size: 40px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.clock {
  width: 300px;
  height: 300px;
  border: 10px solid white;
  border-radius: 50%;
  margin: 100px auto;
  position: relative;
  padding: 2rem;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
    inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
}
.center {
  background-color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 48%;
  right: 47%;
}
.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-3px); /* account for the height of the clock hands */
}
.hand {
  width: 50%;
  height: 6px;
  background: black;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.05, 2.7, 0.58, 1);
}
.second-hand {
  height: 1px;
}
.hour-hand {
  width: 30%;
  position: absolute;
  top: 49%;
  right: 47%;
}

 

[ JS ]

const secondHand = document.querySelector(".second-hand");
const minHand = document.querySelector(".min-hand");
const hourHand = document.querySelector(".hour-hand");
const nowClock = document.querySelector(".nowClock");

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");

  nowClock.innerText = `${hours}:${minutes}:${seconds}`;
}

function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsDegrees = (seconds / 60) * 360 + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();
  const minsDegrees = (mins / 60) * 360 + 90;
  minHand.style.transform = `rotate(${minsDegrees}deg)`;

  const hours = now.getHours();
  const hourDegrees = (hours / 12) * 360 + 90; // 시간은 12
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(setDate, 1000);
getClock();
setInterval(getClock, 1000);