카운트다운 타이머 웹사이트 구축-JS 튜토리얼-php.cn

카운트다운 타이머 웹사이트 구축

PHPz

풀어 주다： 2024-08-14 12:37:20

원래의

1078명이 탐색했습니다.

Build a Countdown Timer Website

소개

안녕하세요, 개발자 여러분! 오늘은 제가 최근 완료한 프로젝트인 카운트다운 타이머를 공유하게 되어 기쁩니다. 이 프로젝트는 특히 시간 조작 및 DOM 업데이트 분야에서 JavaScript를 배우고 연습할 수 있는 좋은 방법입니다. 이벤트 카운트다운, 제품 출시 또는 재미있는 타이머를 구축하려는 경우 이 프로젝트는 완벽한 시작입니다.

프로젝트 개요

카운트다운 타이머를 사용하면 사용자가 목표 날짜와 시간을 설정할 수 있으며 해당 순간이 도달할 때까지 일, 시간, 분, 초를 계속해서 카운트다운합니다. 타이머는 실시간으로 업데이트되어 시각적으로 매력적이고 반응성이 뛰어난 디자인을 제공합니다. 이 프로젝트는 동적이고 대화형 웹 애플리케이션을 만드는 기술을 향상시키려는 개발자에게 이상적입니다.

특징

실시간 카운트다운: 타이머가 1초마다 업데이트되어 지정된 날짜까지 남은 시간을 표시합니다.
반응형 디자인: 레이아웃은 다양한 기기와 화면 크기에 원활하게 적용됩니다.
사용자 정의 가능한 종료 날짜: 목표 날짜와 시간을 쉽게 수정할 수 있어 타이머를 다양한 이벤트에 맞게 활용할 수 있습니다.

사용된 기술

HTML: 웹페이지 콘텐츠를 구성하는 데 사용됩니다.
CSS: 웹페이지 스타일 지정 및 응답성 보장에 적용됩니다.
JavaScript: 남은 시간을 계산하고 DOM을 실시간으로 업데이트하기 위해 구현되었습니다.

프로젝트 구조

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

Countdown-Timer/
├── index.html
├── style.css
└── script.js

로그인 후 복사

index.html: 웹페이지의 HTML 구조를 포함합니다.
style.css: 반응형 디자인 규칙을 포함한 CSS 스타일을 보유합니다.
script.js: JavaScript를 사용하여 카운트다운 로직과 DOM 업데이트를 관리합니다.

설치

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

저장소 복제:

git clone https://github.com/abhishekgurjar-in/Countdown-Timer.git

로그인 후 복사

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

용법

웹사이트를 엽니다 웹 브라우저에서
지정된 종료일까지 타이머 카운트다운을 시청하세요.
이벤트나 요구 사항에 맞게 script.js 파일에서 종료 날짜를 맞춤설정하세요.

코드 설명

HTML

index.html 파일에는 카운트다운 표시와 간단한 헤더를 포함한 웹페이지의 구조가 포함되어 있습니다. 다음은 HTML 코드의 일부입니다:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Countdown Timer</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="main">
      <div class="overlay">
        <div class="header">
          <h1>Countdown Timer</h1>
        </div>
        <div class="title">We are coming soon</div>
        <div class="title" id="end-date">4 July 2025 10:00 PM</div>
        <div class="col">
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Days</label>
          </div>
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Hours</label>
          </div>
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Minutes</label>
          </div>
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Seconds</label>
          </div>
        </div>
        <div class="footer">
          <p>Made with ❤️ by Abhishek Gurjar</p>
        </div>
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

로그인 후 복사

CSS

style.css 파일에는 웹페이지가 시각적으로 매력적이도록 하고 다양한 화면 크기에 대한 반응성을 포함하는 스타일이 포함되어 있습니다. 주요 스타일은 다음과 같습니다.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.main {
  width: 100%;
  height: 100vh;
  background: url(./images/bg.jpg);
  background-size: cover;
}

.overlay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
}

.title {
  color: white;
  text-align: center;
  font-size: 2.5rem;
  padding: 25px;
}

.col {
  margin-top: 10px;
  width: 1000px;
  color: white;
  justify-content: center;
  display: flex;
}

.col div {
  width: 250px;
  text-align: center;
}

input {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: transparent;
  border-radius: 5px;
  height: 50px;
  text-align: center;
  font-size: 20px;
}

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

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

로그인 후 복사

자바스크립트

script.js 파일은 카운트다운 로직을 관리하여 매초 디스플레이를 업데이트합니다. 다음은 JavaScript 코드의 일부입니다.

const endDate = "4 July 2025 10:00 PM";

document.getElementById("end-date").innerText = endDate;
const input = document.querySelectorAll("input");

function countDown() {
  const end = new Date(endDate);
  const now = new Date();
  const diff = (end - now) / 1000;

  if (diff < 0) return;

  input[0].value = Math.floor(diff / 3600 / 24);
  input[1].value = Math.floor(diff / 3600) % 24;
  input[2].value = Math.floor(diff / 60) % 60;
  input[3].value = Math.floor(diff) % 60;
}

countDown();
setInterval(countDown, 1000);

로그인 후 복사

라이브 데모

여기에서 카운트다운 타이머의 라이브 데모를 확인할 수 있습니다.

결론

이 카운트다운 타이머를 구축하는 것은 시간 조작 및 DOM 상호 작용에서 JavaScript의 기능을 탐색할 수 있게 해주는 귀중한 학습 경험이었습니다. 이 프로젝트가 여러분이 자신만의 역동적이고 대화형 애플리케이션을 만드는 데 영감을 주기를 바랍니다. 자유롭게 코드를 탐색하고, 사용자 정의하고, 자신의 프로젝트에서 사용해 보세요. 즐거운 코딩하세요!