아날로그 시계 웹사이트 구축-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

아날로그 시계 웹사이트 구축

Aug 14, 2024 pm 12:38 PM

Build a Analog Clock Website

소개

안녕하세요, 개발자 여러분! 오늘은 제가 최근 완성한 아날로그 시계 프로젝트를 소개하게 되어 매우 기쁩니다. 이 프로젝트는 전통적인 아날로그 시계 문자판을 사용하여 시간을 표시하는 시각적으로 매력적이고 대화형 방식입니다. 특히 애니메이션, DOM 조작 및 시간 기반 기능 작업 시 JavaScript, CSS 및 HTML 기술을 연마하기 위한 훌륭한 프로젝트입니다. 연습을 원하는 초보자이거나 클래식 시계 인터페이스를 만들고 싶은 숙련된 개발자라면 이 프로젝트는 훌륭한 선택입니다.

프로젝트 개요

아날로그 시계는 기존 아날로그 시계의 외관과 기능을 그대로 재현한 실시간 시계입니다. 시계는 현재 시간을 반영하기 위해 시침, 분침, 초침이 부드럽게 회전하면서 매초 동적으로 업데이트됩니다. 이 프로젝트는 동적이고 시각적으로 매력적인 웹 애플리케이션 구축을 연습하려는 개발자에게 이상적입니다.

특징

실시간 시계: 시계는 1초마다 업데이트되어 움직이는 시, 분, 초침으로 현재 시간을 표시합니다.
부드러운 애니메이션: 시계 바늘이 부드럽게 회전하여 사실적인 아날로그 시계 효과를 만들어냅니다.
반응형 디자인: 시계는 반응형으로 설계되어 다양한 기기와 화면 크기에서 멋지게 보입니다.
미니멀리스트 디자인: 깔끔하고 심플한 디자인이 특징이며 기능성과 우아함에 중점을 둔 시계입니다.

사용된 기술

HTML: 웹페이지와 시계 레이아웃을 구성하는 데 사용됩니다.
CSS: 바늘 위치 지정, 부드러운 애니메이션 추가 등 시계 스타일을 지정하는 데 적용됩니다.
JavaScript: 시계의 시간 계산 처리, DOM 업데이트, 바늘 회전 관리를 위해 구현되었습니다.

프로젝트 구조

프로젝트 구조를 간단히 살펴보겠습니다.

Analog-Clock/
├── index.html
├── style.css
└── script.js

로그인 후 복사

index.html: 웹페이지의 HTML 구조를 포함합니다.
style.css: 애니메이션 및 반응형 디자인을 포함한 CSS 스타일을 보유합니다.
script.js: JavaScript를 사용하여 시계의 동적 측면을 관리합니다.

설치

프로젝트를 시작하려면 다음 단계를 따르세요.

저장소 복제:

git clone https://github.com/abhishekgurjar-in/Analog-Clock.git

로그인 후 복사

프로젝트 디렉토리 열기:
```
cd Analog-Clock
```
로그인 후 복사
프로젝트 실행:
- 로컬 서버에서 실행하거나 간단히 웹 브라우저에서 index.html 파일을 열 수 있습니다.

용법

웹사이트를 엽니다 웹 브라우저에서
시계를 보세요 시, 분, 초침의 부드러운 애니메이션으로 현재 시간을 표시합니다.

코드 설명

HTML

index.html 파일은 시계 컨테이너와 헤더를 포함한 웹페이지의 구조를 설정합니다. 다음은 HTML 코드의 일부입니다:

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Analog Clock&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script src="script.js" defer&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="header"&gt;
      &lt;h1&gt;Analog Clock&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div id="clockContainer"&gt;
      &lt;div id="hour"&gt;&lt;/div&gt;
      &lt;div id="minute"&gt;&lt;/div&gt;
      &lt;div id="second"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;
      &lt;p&gt;Made with ❤️ by Abhishek Gurjar&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

CSS

style.css 파일은 시계 컨테이너와 바늘의 스타일을 지정하여 시간을 표시하기 위해 올바르게 회전하는지 확인합니다. 주요 스타일은 다음과 같습니다:

#clockContainer {
  position: relative;
  margin: auto;
  height: 30vw;
  width: 30vw;
  background: url(clock.png) no-repeat;
  background-size: 100%;
}

#hour,
#minute,
#second {
  position: absolute;
  background: black;
  border-radius: 10px;
  transform-origin: bottom;
}

#hour {
  width: 1.8%;
  height: 25%;
  top: 25%;
  left: 48.85%;
  opacity: 0.8;
}

#minute {
  width: 1.6%;
  height: 30%;
  top: 19%;
  left: 48.9%;
  opacity: 0.8;
}

#second {
  width: 1%;
  height: 40%;
  top: 9%;
  left: 49.25%;
  opacity: 0.8;
}

.header {
  margin: 80px;
  text-align: center;
}

.footer {
  margin: 50px;
  text-align: center;
}

로그인 후 복사

자바스크립트

script.js 파일은 현재 시간 계산을 처리하고 이에 따라 시계 바늘의 회전을 업데이트합니다. 다음은 JavaScript 코드의 일부입니다.

setInterval(() =&gt; {
  const date = new Date();
  const hourTime = date.getHours();
  const minuteTime = date.getMinutes();
  const secondTime = date.getSeconds();

  const hourRotation = 30 * hourTime + minuteTime / 2;
  const minuteRotation = 6 * minuteTime;
  const secondRotation = 6 * secondTime;

  const hour = document.getElementById('hour');
  const minute = document.getElementById('minute');
  const second = document.getElementById('second');

  hour.style.transform = `rotate(${hourRotation}deg)`;
  minute.style.transform = `rotate(${minuteRotation}deg)`;
  second.style.transform = `rotate(${secondRotation}deg)`;
}, 1000);

로그인 후 복사

라이브 데모

여기에서 아날로그 시계의 라이브 데모를 확인하실 수 있습니다.

결론

이 아날로그 시계를 만드는 것은 JavaScript 애니메이션과 DOM 조작에 대해 더 깊이 파고들 수 있는 보람 있는 경험이었습니다. 이 프로젝트가 여러분이 자신만의 대화형이며 시각적으로 매력적인 애플리케이션을 만드는 데 영감을 주기를 바랍니다. 자유롭게 코드를 탐색하고, 사용자 정의하고, 자신의 프로젝트에서 사용해 보세요. 즐거운 코딩하세요!