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

소개

안녕하세요, 개발자 여러분! 오늘은 제가 최근 완료한 프로젝트인 카운트다운 타이머를 공유하게 되어 기쁩니다. 이 프로젝트는 특히 시간 조작 및 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 업데이트를 관리합니다.

설치

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

1. 저장소 복제:
   

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

2. 프로젝트 디렉토리 열기:
   

   cd Countdown-Timer
   

3. 프로젝트 실행:

   • 로컬 서버에서 실행하거나 간단히 웹 브라우저에서 index.html 파일을 열 수 있습니다.

용법

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

코드 설명

HTML

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

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Countdown Timer6e916e0f7d1e588d4f442bf645aedb2f
    d8b7823904473d155afe66ded7e78f93
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    473a967da286a3c736825b4619e7dc30
      af42a90d66eb0ab7ffd90605d49bfcdb
        924ff17625d603f964501dd897c96cc6
          4a249f0d628e2318394fd9b75b4636b1Countdown Timer473f0a7621bec819994bb5020d29372a
        16b28748ea4df4d9c2150843fecfba68
        9e80a1cbb6fa0609753359a9577296d4We are coming soon16b28748ea4df4d9c2150843fecfba68
        40cf589a8d9222aac570db87a343584a4 July 2025 10:00 PM16b28748ea4df4d9c2150843fecfba68
        e70522973cfd5bc8e7f5270545f1ac4d
          dc6dce4a544fdca2df29d5ac0ea9906b
            08aecd3082d1f5b25e4b501500d294fc
            df250b2156c434f3390392d09b1c9563
            2e1cf0710519d5598b1f0f14c36ba674Days8c1ecd4bb896b2264e0711597d40766c
          16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906b
            08aecd3082d1f5b25e4b501500d294fc
            df250b2156c434f3390392d09b1c9563
            2e1cf0710519d5598b1f0f14c36ba674Hours8c1ecd4bb896b2264e0711597d40766c
          16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906b
            08aecd3082d1f5b25e4b501500d294fc
            df250b2156c434f3390392d09b1c9563
            2e1cf0710519d5598b1f0f14c36ba674Minutes8c1ecd4bb896b2264e0711597d40766c
          16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906b
            08aecd3082d1f5b25e4b501500d294fc
            df250b2156c434f3390392d09b1c9563
            2e1cf0710519d5598b1f0f14c36ba674Seconds8c1ecd4bb896b2264e0711597d40766c
          16b28748ea4df4d9c2150843fecfba68
        16b28748ea4df4d9c2150843fecfba68
        ffd6ba4147bda351239915f463e46e38
          e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
        16b28748ea4df4d9c2150843fecfba68
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    35c1efb1a96c7fc3ad8e56d875e8f4062cacc6d41bbb37262a98f745aa00fbf0
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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의 기능을 탐색할 수 있게 해주는 귀중한 학습 경험이었습니다. 이 프로젝트가 여러분이 자신만의 역동적이고 대화형 애플리케이션을 만드는 데 영감을 주기를 바랍니다. 자유롭게 코드를 탐색하고, 사용자 정의하고, 자신의 프로젝트에서 사용해 보세요. 즐거운 코딩하세요!

크레딧

이 프로젝트는 다양한 이벤트를 위한 간단하고 효과적인 카운트다운 도구의 필요성에서 영감을 받았습니다.

작가

• 아비셰크 구자르
  • GitHub 프로필

위 내용은 카운트다운 타이머 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!