Javascript Clock

Javascript

Javascript Clock

HiroDaegu 2021. 9. 10. 20:42

728x90

SMALL

<!DOCTYPE html>
<html lang="ko">

<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>Clock</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>

<body>
  <h1>Simple Clock</h1>
  <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>
  </div>
</body>

</html>

html {
  background: #018ded
  background-size: cover;
  font-family: 'helvatica neue';
  text-align: center;
  font-size: 10px;
}

body {
  font-size: 2rem;
  display: flex;
  flex-flow: column;
  flex: 1;
  min-height: 100vh;
  align-items: center;
}

h1 {
  color: lavender;
}

.clock {
  width: 30rem;
  height: 30rem;
  border: 20px solid lavender;
  border-radius: 50%;
  margin: 50px auto;
  position: relative;
  padding: 2rem;
  box-shadow: 
  0 0 0px 4px rgba(0, 0, 0, .1),
  inset 0 0 0 3px #efefef,
  inset 0 0 10px black,
  0 0 10px rgba(0, 0, 0, .2);
}

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-3px);
}

.hand {
  width: 50%;
  height: 6px;
  background: skyblue;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all .05s;
  transition-timing-function: cubic-bezier(.1, 2.7, .58, 1);
}

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

function setDate() {
  const now = new Date();
  const seconds = now.getSeconds();
  const mins = now.getMinutes();
  const hours = now.getHours();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  const minsDegrees = ((mins / 60) * 360) + 90;
  const hoursDegrees = ((hours / 12) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`
  minHand.style.transform = `rotate(${minsDegrees}deg)`
  hourHand.style.transform = `rotate(${hoursDegrees}deg)`

}

setInterval(setDate, 1000);

728x90

LIST