2022. 6. 13. 17:43ㆍProgram/JavaScript
087_자바스크립트로 아날로그 시간(시계) 표시하기
[적용]
- 아날로그 형식의 시계를 표시하고 싶을 때
[내용]
아날로그 시계를 구현하여 Date 객체를 좀 더 자세히 알아보자.
div 요소를 사용해 시계바늘의 컨테이너를 만든다.
원의 중심을 기준으로 각도를 계산하기 때문에 컨테이너를 사용하면 처리가 더욱 간단하다.
기본적인 상태는 바늘이 모두 12시를 가리키고 있다.
HTML index.html
<body>
<div class="clock">
<div class="lineHour"></div>
<div class="lineMin"></div>
<div class="lineSec"></div>
</div>
</body>CSS style.css
body {background-color: #000000;}
.clock {
border-radius: 50%;
border: 3px solid white;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
position: relative;
}
.lineHour {
width: 10px;
height: 150px;
background: white;
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 5px);
transform-origin: bottom;
}
.lineMin {
width: 4px;
height: 200px;
background: blue;
position: absolute;
top: calc(50% - 200px);
left: calc(50% - 2px);
transform-origin: bottom;
}
.lineSec {
width: 2px;
height: 200px;
background: red;
position: absolute;
top: calc(50% - 200px);
left: calc(50% - 1px);
transform-origin: bottom;
}
실행결과
현재 시간을 실시간으로 적용하기 위해 setInterval()을 사용한다.
new Date()를 사용해 현재 시간 정보를 가져오고, getSeconds()를 사용해 초 정보를 추출한다.
추출한 정보를 초침의 각도로 설정하며, 원은 360도이므로 1초당 6도(360도 / 60분할)가 된다.
분침과 시침 정보 역시 현재 시간 정보에서 가져온다. getHours()로 시간 단위(0~23)를 추출하고
getMinutes()로 분 단위(0~59)를 추출한다.
추출한 정보로 각도를 설정하지만, 시침은 다음과 같이 주의할 점이 있다.
- 추출한 값은 0~23이지만, 아날로그 시계의 숫자는 0~11까지이다.
- 시침은 시와 함께 분에 따라서도 각도가 변한다.
JavaScript main.js
setInterval(() => {
// 현재 시간 가져오기
const now = new Date();
// 시간을 단위로 추출
const h = now.getHours(); // 시간(0~23)
const m = now.getMinutes(); // 분(0~59)
const s = now.getSeconds(); // 초(0~59)
// 시계 바늘의 각도 반영
// 시침(시침은 시와 함께 분의 각도도 고려)
const degH = h * (360 /12) + m * (360 / 12 / 60);
// 분침
const degM = m * (360 / 60);
// 초침
const degS = s * (360 / 60);
const elementH = document.querySelector('.lineHour');
const elementM = document.querySelector('.lineMin');
const elementS = document.querySelector('.lineSec');
elementH.style.transform = `rotate(${degH}deg)`;
elementM.style.transform = `rotate(${degM}deg)`;
elementS.style.transform = `rotate(${degS}deg)`;
}, 50);
실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 확인창 표시하기 confirm() (0) | 2022.06.13 |
|---|---|
| [JavaScript] 자바스크립트에서 경고 표시하기 alert() (0) | 2022.06.13 |
| [JavaScript] 자바스크립트에서 카운트다운 만들기 (0) | 2022.06.11 |
| [JavaScript] 자바스크립트에서 경과 시간 확인하기 (0) | 2022.06.11 |
| [JavaScript] 자바스크립트에서 날짜와 시간 차이 구하기 (0) | 2022.06.11 |