디지털과 아날로그가 결합된 시계 정보
디지털과 아날로그가 결합된 시계본문
..
ㅋㅋ
1 노잼
0
1 노잼
0
댓글 4개
과제인가
좋은데요 한번 만들어 보구 싶은 생각이 절로드네 ㅎㅎㅎ
claude로 만들었습니다. 재미있네요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회전하는 숫자 시계</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
}
.clock {
position: relative;
width: 400px;
height: 400px;
border: 10px solid #333;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.center {
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background-color: #333;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.number-marker {
position: absolute;
font-size: 18px;
font-weight: bold;
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
transform: translate(-50%, -50%);
}
.hour-hand, .minute-hand, .second-hand {
position: absolute;
top: 50%;
left: 50%;
transform-origin: 0% 0%;
z-index: 5;
}
.hour-hand span, .minute-hand span, .second-hand span {
position: absolute;
transform: translate(-50%, -50%);
text-align: center;
}
.hour-hand span {
color: #333;
font-size: 16px;
font-weight: bold;
}
.minute-hand span {
color: #666;
font-size: 14px;
font-weight: bold;
}
.second-hand span {
color: #f00;
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="clock">
<!-- 시계 숫자 마커 -->
<div id="clock-numbers"></div>
<!-- 시침 -->
<div id="hour-hand" class="hour-hand"></div>
<!-- 분침 -->
<div id="minute-hand" class="minute-hand"></div>
<!-- 초침 -->
<div id="second-hand" class="second-hand"></div>
<div class="center"></div>
</div>
<script>
// 시계 숫자 생성 (1-12)
const clockNumbers = document.getElementById('clock-numbers');
for (let i = 1; i <= 12; i++) {
const number = document.createElement('div');
number.className = 'number-marker';
number.textContent = i;
// 각도 계산 (12시가 상단 중앙)
const angle = (i * 30 - 90) * (Math.PI / 180);
const radius = 170; // 시계 반지름
const x = radius * Math.cos(angle) + 200;
const y = radius * Math.sin(angle) + 200;
number.style.left = x + 'px';
number.style.top = y + 'px';
clockNumbers.appendChild(number);
}
// 시계 바늘 요소
const hourHand = document.getElementById('hour-hand');
const minuteHand = document.getElementById('minute-hand');
const secondHand = document.getElementById('second-hand');
// 시계 업데이트 함수
function updateClock() {
const now = new Date();
const hours = now.getHours() % 12 || 12; // 12시간제
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 기존 바늘 내용 제거
hourHand.innerHTML = '';
minuteHand.innerHTML = '';
secondHand.innerHTML = '';
// 시침, 분침, 초침 회전 각도 계산 (12시가 상단 중앙에 오도록)
const hourAngle = ((hours * 30) + (minutes * 0.5) - 90);
const minuteAngle = (minutes * 6 - 90);
const secondAngle = (seconds * 6 - 90);
// 시침용 숫자 생성 및 배치 (시간 * 3)
const hourMaxLength = 120; // 최대 길이
for (let i = 0; i < 3; i++) {
const hourSpan = document.createElement('span');
hourSpan.textContent = hours;
// 각 숫자의 위치 계산 (더 좁은 간격으로)
// 시작 위치를 20%로 하여 중심에서 너무 멀지 않게 설정
const distanceFactor = 0.2 + (i * 0.3); // 0.2, 0.5, 0.8 위치에 배치
const distance = hourMaxLength * distanceFactor;
// 위치 계산 및 설정
const hourRadians = hourAngle * (Math.PI / 180);
const hx = distance * Math.cos(hourRadians);
const hy = distance * Math.sin(hourRadians);
hourSpan.style.left = hx + 'px';
hourSpan.style.top = hy + 'px';
hourHand.appendChild(hourSpan);
}
// 분침용 숫자 생성 및 배치 (분 * 5)
const minuteMaxLength = 150; // 최대 길이
for (let i = 0; i < 5; i++) {
const minuteSpan = document.createElement('span');
minuteSpan.textContent = minutes;
// 각 숫자의 위치 계산 (더 좁은 간격으로)
// 시작 위치를 20%로 하여 중심에서 너무 멀지 않게 설정
const distanceFactor = 0.2 + (i * 0.15); // 0.2, 0.35, 0.5, 0.65, 0.8
const distance = minuteMaxLength * distanceFactor;
// 위치 계산 및 설정
const minuteRadians = minuteAngle * (Math.PI / 180);
const mx = distance * Math.cos(minuteRadians);
const my = distance * Math.sin(minuteRadians);
minuteSpan.style.left = mx + 'px';
minuteSpan.style.top = my + 'px';
minuteHand.appendChild(minuteSpan);
}
// 초침용 숫자 생성 및 배치 (초 * 7)
const secondMaxLength = 180; // 최대 길이
for (let i = 0; i < 7; i++) {
const secondSpan = document.createElement('span');
secondSpan.textContent = seconds;
// 각 숫자의 위치 계산 (더 좁은 간격으로)
// 시작 위치를 20%로 하여 중심에서 너무 멀지 않게 설정
const distanceFactor = 0.2 + (i * 0.1); // 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8
const distance = secondMaxLength * distanceFactor;
// 위치 계산 및 설정
const secondRadians = secondAngle * (Math.PI / 180);
const sx = distance * Math.cos(secondRadians);
const sy = distance * Math.sin(secondRadians);
secondSpan.style.left = sx + 'px';
secondSpan.style.top = sy + 'px';
secondHand.appendChild(secondSpan);
}
// 1초마다 업데이트
setTimeout(updateClock, 1000);
}
// 시계 시작
updateClock();
</script>
</body>
</html>
와.. 대단하시네요.
코딩을 직접하신건가요? 뭔가 대기화면상에 띄워 놓으면 좋을 듯..
