글 작성자: 택시 운전사
반응형



⌚ Day 2 - JavaScript로 시계만들기

JavaScript 30의 두 번째 프로젝트는 '시계 만들기'이다. JavaScript도 사용되지만 CSS 테크닉도 필요한 좋은 프로젝트이다.


😃 HTML 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>clock</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1>CLOCK</h1>
    <section>
      <div class="clock">
        <div class="clock-face">
          <div class="circle"></div>
          <div class="hand hour-hand"></div>
          <div class="hand min-hand"></div>
          <div class="hand sec-hand"></div>
        </div>
      </div>
    </section>
    <footer>
      <p><a href="../">Back to List</a></p>
      <p><a href="https://javascript30.com/">Javascript30</a> Day2</p>
    </footer>
    <script src="main.js"></script>
  </body>
</html>
 
cs


시침, 분침, 초침과 시계 테두리, 시계의 중앙부를 만들었다.

😃 CSS코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
body {
  text-align: center;
  background-color: #ff3cac;
  background-image: linear-gradient(
    225deg,
    #ff3cac 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
  background-size: auto 130%;
  background-position: center center;
  min-height: 100vh;
}
h1 {
  display: inline-block;
  padding: 1rem 2rem;
  background: #3cffc9;
  font-weight: 900;
}
.hand {
  width: 50%;
  height: 6px;
  background: black;
  position: absolute;
  top: 50%;
  transition: 0.05s;
  transform: rotate(90deg);
  transform-origin: 100%;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hour-hand {
  z-index: 3;
  background: black;
}
.min-hand {
  z-index: 2;
  background: rgb(24, 24, 24);
}
.sec-hand {
  z-index: 1;
  background: rgb(46, 46, 46);
}
.clock {
  width: 30rem;
  height: 30rem;
  border: 1.5rem solid white;
  border-radius: 50%;
  margin: 3rem auto;
  position: relative;
  padding: 2rem;
  box-shadow: 0 0 0px 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);
}
.circle {
  width: 2rem;
  height: 2rem;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  z-index: 4;
}
.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
}
 
cs


transform rotate의 중심점이 되는 transform-origin의 위치 선정, 튕기는 듯한 느낌의 transition등이 특징적으로 사용되었다.

😃 JavaScript 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const secondHand = document.querySelector(".sec-hand");
const minHand = document.querySelector(".min-hand");
const hourHand = document.querySelector(".hour-hand");
 
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 hoursDegrees = (hours / 12) * 360 + 90;
  hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
};
 
setInterval(setDate, 1000);
 
cs


new Date()로 매초마다 시간, 분, 초를 받아와서 각각 CSS에 맞는 값으로 연산하여 transform 값에 적용하는 코드이다.


링크


반응형
저작자표시

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] 💪 Array관련 Method 완전정복 1탄  (0) 2019.02.05
[JavaScript] 🎨 JavaScript로 CSS 업데이트하기  (0) 2019.02.04
[JavaScript] 🎹 JavaScript로 악기 만들기  (0) 2019.02.02
📅 30일간 30개의 JavaScript 프로젝트 도전기 / JavaScript 30  (0) 2019.02.02
npx create-react-app ... 그래서 npx가 뭐길래?  (3) 2018.12.26

티스토리툴바