Erstellen Sie eine Countdown-Timer-Website

Einführung

Hallo, liebe Entwickler! Heute freue ich mich, ein Projekt vorzustellen, das ich kürzlich abgeschlossen habe: einen Countdown-Timer. Dieses Projekt ist eine großartige Möglichkeit, JavaScript zu lernen und zu üben, insbesondere in den Bereichen Zeitmanipulation und DOM-Updates. Egal, ob Sie einen Countdown für eine Veranstaltung, eine Produkteinführung oder einfach nur einen lustigen Timer erstellen möchten, dieses Projekt ist der perfekte Anfang.

Projektübersicht

Mit dem Countdown-Timer können Benutzer ein Zieldatum und eine Zielzeit festlegen und die Tage, Stunden, Minuten und Sekunden kontinuierlich herunterzählen, bis dieser Moment erreicht ist. Der Timer wird in Echtzeit aktualisiert und bietet ein optisch ansprechendes und ansprechendes Design. Dieses Projekt ist ideal für Entwickler, die ihre Fähigkeiten bei der Erstellung dynamischer und interaktiver Webanwendungen verbessern möchten.

Merkmale

• Echtzeit-Countdown: Der Timer aktualisiert sich jede Sekunde und zeigt die verbleibende Zeit bis zum angegebenen Datum an.
• Responsive Design: Das Layout passt sich nahtlos an verschiedene Geräte und Bildschirmgrößen an.
• Anpassbares Enddatum: Das Zieldatum und die Zielzeit können einfach geändert werden, wodurch der Timer für verschiedene Ereignisse vielseitig einsetzbar ist.

Verwendete Technologien

• HTML: Wird zur Strukturierung des Inhalts auf der Webseite verwendet.
• CSS: Wird für die Gestaltung der Webseite und die Sicherstellung der Reaktionsfähigkeit verwendet.
• JavaScript: Implementiert zur Berechnung der verbleibenden Zeit und Aktualisierung des DOM in Echtzeit.

Projektstruktur

Hier ein kurzer Blick auf die Projektstruktur:

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

• index.html: Enthält die HTML-Struktur der Webseite.
• style.css: Enthält die CSS-Stile, einschließlich responsiver Designregeln.
• script.js: Verwaltet die Countdown-Logik und DOM-Updates mithilfe von JavaScript.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

1. Klonen Sie das Repository:
   

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

2. Öffnen Sie das Projektverzeichnis:
   

   cd Countdown-Timer
   

3. Führen Sie das Projekt aus:

   • Sie können es entweder auf einem lokalen Server ausführen oder einfach die Datei index.html in einem Webbrowser öffnen.

Verwendung

1. Öffnen Sie die Websitein einem Webbrowser.
2. Beobachten Sie, wie der Timer bis zum angegebenen Enddatum herunterzählt.
3. Passen Sie das Enddatum in der Datei script.js an Ihre Veranstaltung oder Anforderung an.

Code-Erklärung

HTML

Die Datei index.html enthält die Struktur der Webseite, einschließlich der Countdown-Anzeige und einer einfachen Kopfzeile. Unten finden Sie einen Ausschnitt des HTML-Codes:

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

Die style.css-Datei enthält Stile, die dafür sorgen, dass die Webseite optisch ansprechend ist und für verschiedene Bildschirmgrößen reagiert. Hier sind einige wichtige Stile:

* {
  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;
}

JavaScript

Die Datei script.js verwaltet die Countdown-Logik und aktualisiert die Anzeige jede Sekunde. Unten ist ein Ausschnitt des JavaScript-Codes:

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);

Live-Demo

Sie können sich hier die Live-Demo des Countdown-Timers ansehen.

Abschluss

Die Erstellung dieses Countdown-Timers war eine wertvolle Lernerfahrung, die es mir ermöglichte, die Fähigkeiten von JavaScript in Bezug auf Zeitmanipulation und DOM-Interaktion zu erkunden. Ich hoffe, dass dieses Projekt Sie dazu inspiriert, Ihre eigenen dynamischen und interaktiven Anwendungen zu erstellen. Erkunden Sie den Code, passen Sie ihn an und verwenden Sie ihn in Ihren eigenen Projekten. Viel Spaß beim Codieren!

Credits

Dieses Projekt wurde durch den Bedarf an einem einfachen und effektiven Countdown-Tool für verschiedene Veranstaltungen inspiriert.

Autor

• Abhishek Gurjar
  • GitHub-Profil

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Countdown-Timer-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!