HTML, CSS 및 JavaScript를 사용하여 웹 아날로그 시계를 만드는 방법
bing GPT로 생성한 AI코딩
아래는 HTML, CSS 및 JavaScript를 사용하여 아날로그 시계를 만드는 방법입니다.
bing GPT로 질문하여 얻은 대답으로 만든 웹 아날로그 시계입니다.
HTML, CSS 및 JAVASCRIP를 사용하여 만들어 달라고 했습니다.
<!DOCTYPE html>
<html>
<head>
<title>Analog Clock</title>
<style>
.clock {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f7f7f7;
margin: 0 auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.hour,
.minute,
.second {
position: absolute;
width: 50%;
height: 6px;
background-color: #333;
transform-origin: 100%;
transform: rotate(90deg);
animation: rotate 43200s linear infinite;
margin-top: 100px;
}
.hour {
height: 10%;
background-color: #333;
transform-origin: 100%;
transform: rotate(90deg);
animation: rotate 43200s linear infinite;
}
.minute {
height: 8%;
background-color: #333;
transform-origin: 100%;
transform: rotate(90deg);
animation: rotate 3600s linear infinite;
}
.second {
height: 4%;
background-color: #f00;
transform-origin: 100%;
transform: rotate(90deg);
animation: rotate 60s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
<script>
const hourHand = document.querySelector('.hour');
const minuteHand = document.querySelector('.minute');
const secondHand = document.querySelector('.second');
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const minutes = now.getMinutes();
const minutesDegrees = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 90;
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
const hours = now.getHours();
const hoursDegrees = ((hours / 12) * 360) + ((minutes / 60) * 30) + 90;
hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
}
setInterval(setDate, 1000);
</script>
</body>
</html>
위의 코드는 HTML, CSS 및 JavaScript를 사용하여 아날로그 시계를 만드는 방법을 보여줍니다. 이 코드를 사용하여 웹 페이지에 아날로그 시계를 추가할 수 있습니다. 시계의 크기와 색상을 변경하려면 CSS를 수정하십시오. 시계의 시, 분 및 초를 조정하려면 JavaScript를 수정하십시오.
아래는 웹 코딩으로 작업된 아날로그 시계 적용 시 출력 모습입니다.
HTML, CSS 및 JavaScript를 사용하여 웹 아날로그 시계를 만드는 방법 - 오치리가 알아보는 각종 모든
Analog Clock HTML, CSS 및 JavaScript를 사용하여 웹 아날로그 시계를 만드는 방법
sharp572.com
이때 웹페이지에 아날로그 시계가 출력되지만 시,분,초 바늘이 원 안에 있지않고 시계 맨위에 위치하고 있음을 볼 수 있습니다. 그럼 이 시,분,초 바늘을 제 자리에 위치하기위해 코드를 수정하겠습니다.
.hour,
.minute,
.second {
position: absolute;
width: 50%;
height: 6px;
background-color: #333;
transform-origin: 100%;
transform: rotate(90deg);
animation: rotate 43200s linear infinite;
margin-top: 100px;
}
위와 같은 코드에 마지막에 margin-top: 100px; 이 CSS를 추가하겠습니다.
그럼 위와 같이 아날로그 시계처럼 시,분,초 바늘이 제 자리를 찾아갔습니다.
요즘에는 인공지능 AI 코딩으로 쉽게 코딩을 할 수 있게 되었습니다.
하지만 우리가 생각하는 것처럼 완벽한 코딩이 안될때도 있습니다. 이럴때에는 개발자가 직접 코드를 추가해줘야 할 것입니다.
인공지능 GPT는 코딩을 훨신 수월하게 만들어 주지만 정학도가 떨어지는 경우도 있으니 AI만 믿지말고 정확히 확인 하면서 코딩하는 것이 중요하다고 생각됩니다.
오늘 포스팅은 여기서 마치겠습니다.
오늘도 즐거운 하루 보내세요.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] 예외 처리 - try catch finally 문 (2) | 2017.08.30 |
|---|---|
| [자바스크립트] 문서 객체 가져오기 (0) | 2017.08.29 |
| [자바스크립트] window.moveBy() window.moveTo() - window 이동하기 (0) | 2017.08.28 |
| [자바스크립트] Date 객체 및 D-day(디데이 날짜 및 시간 계산 (1) | 2017.08.27 |
| [자바스크립트] 문서 객체 동적 생성 - createElement(), createTextNode(), appendChild(), innerHTML() (0) | 2017.08.25 |
댓글