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