자바스크립트의 Date 객체를 활용하여 기본 틀을 만들고 ChatGPT로 디지털 시계와 아날로그 시계를 구현해보았다.
초침의 경우 딱딱 끊어지지 않고 부드럽게 움직이도록 했다.
<!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 {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.clock {
font-size: 2rem;
font-weight: bold;
color: #007aff;
}
canvas {
display: block;
margin: 20px auto;
background: #f5f5f5;
border: 2px solid #333;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>디지털 및 아날로그 시계</h1>
<p class="clock" id="clock"></p>
<canvas id="analogClock" width="300" height="300"></canvas>
<script>
// 디지털 시계 업데이트
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById("clock").textContent =
`현재 시각은 ${hours}:${minutes}:${seconds}`;
}
// 아날로그 시계 그리기
function drawAnalogClock() {
const now = new Date();
const canvas = document.getElementById("analogClock");
const ctx = canvas.getContext("2d");
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = canvas.width / 2 - 10;
// 캔버스 초기화
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 시계 테두리
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.strokeStyle = "#333";
ctx.lineWidth = 4;
ctx.stroke();
// 숫자 표시
ctx.font = "16px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
for (let num = 1; num <= 12; num++) {
const angle = (Math.PI / 6) * (num - 3);
const x = centerX + Math.cos(angle) * (radius - 30);
const y = centerY + Math.sin(angle) * (radius - 30);
ctx.fillStyle = "#333";
ctx.fillText(num, x, y);
}
// 시간 계산
const ms = now.getMilliseconds();
const seconds = now.getSeconds() + ms / 1000;
const minutes = now.getMinutes() + seconds / 60;
const hours = now.getHours() % 12 + minutes / 60;
// 시침
const hourAngle = (Math.PI / 6) * hours - Math.PI / 2;
drawHand(ctx, centerX, centerY, hourAngle, radius * 0.5, 6);
// 분침
const minuteAngle = (Math.PI / 30) * minutes - Math.PI / 2;
drawHand(ctx, centerX, centerY, minuteAngle, radius * 0.75, 4);
// 초침 (부드럽게 움직임)
const secondAngle = (Math.PI / 30) * seconds - Math.PI / 2;
drawHand(ctx, centerX, centerY, secondAngle, radius * 0.85, 2, "#f00");
}
// 시계 바늘 그리기 함수
function drawHand(ctx, x, y, angle, length, width, color = "#333") {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.strokeStyle = color;
ctx.moveTo(x, y);
ctx.lineTo(
x + Math.cos(angle) * length,
y + Math.sin(angle) * length
);
ctx.stroke();
}
// 애니메이션 루프
function animate() {
updateClock();
drawAnalogClock();
requestAnimationFrame(animate);
}
// 애니메이션 시작
animate();
</script>
</body>
</html>'개발 > 웹(Web)' 카테고리의 다른 글
| [JavaScript] 문서 객체 모델(DOM) : 라이트박스 사진 갤러리 만들기 (1) | 2025.01.01 |
|---|---|
| [JavaScript] 객체 : 날짜 계산 프로그램 (독서 일수 계산) (0) | 2024.12.30 |
| [JavaScript] 두 숫자의 크기를 비교하는 함수 (0) | 2024.12.29 |
| [JavaScript] sumMulti() 함수 작성 실습 : 수가 같으면 곱셈, 다르면 덧셈 (0) | 2024.12.29 |
| [JavaScript] 즉시실행 함수 : 입력된 이름으로 인사말 작성 코드 (1) | 2024.12.29 |