Erstellen Sie eine Countdown-Timer-Website-js-Tutorial-php.cn

Erstellen Sie eine Countdown-Timer-Website

PHPz

Freigeben： 2024-08-14 12:37:20

Original

1039 Leute haben es durchsucht

Build a 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

Nach dem Login kopieren

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:

Klonen Sie das Repository:

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

Nach dem Login kopieren

Öffnen Sie das Projektverzeichnis:
```
cd Countdown-Timer
```
Nach dem Login kopieren
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

Öffnen Sie die Websitein einem Webbrowser.
Beobachten Sie, wie der Timer bis zum angegebenen Enddatum herunterzählt.
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:

<!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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!