currentYear im Footer
Automatische Aktualisierung des aktuellen Jahres mit JavaScript.
currentYear im Footer
Das aktuelle Jahr im Footer ist nicht direkt Teil der automatischen Generierung, das HTML hierzu
ist aber im Script
generate-navigation.js hinterlegt und erscheint bei der Ausführung.
Das JavaScript für das aktuelle Jahr
selbst ist Teil der main.js
HTML-Struktur im Footer
Füge einen <span id="currentYear"></span> im
Copyright-Text ein:
<footer class="site-footer">
<div class="container">
<div class="footer-content">
<p class="footer-text">© <span id="currentYear"></span> DevPanicZone. Alle Rechte vorbehalten.</p>
<nav class="footer-nav">
<a href="/impressum.html">Impressum</a>
<a href="/datenschutz.html">Datenschutz</a>
</nav>
</div>
</div>
</footer>
JavaScript-Code
Das JavaScript füllt automatisch das aktuelle Jahr ein. Platziere den Code in main.js oder direkt vor dem schließenden </body> Tag:
// ============================================================================
// CURRENT YEAR im Footer
// ============================================================================
/**
* Setzt das aktuelle Jahr im Footer
* Wird beim Laden der Seite ausgeführt
*/
const yearElement = document.getElementById('currentYear');
if (yearElement) {
const currentYear = new Date().getFullYear();
yearElement.textContent = currentYear;
}
Alternative: Inline Script im Footer
Falls du es nicht in einer separaten JavaScript-Datei haben möchtest, kannst du es auch direkt im Footer einfügen.
<footer class="site-footer">
<div class="container">
<div class="footer-content">
<p class="footer-text">© <span id="currentYear"></span> DevPanicZone. Alle Rechte vorbehalten.</p>
<nav class="footer-nav">
<a href="/impressum.html">Impressum</a>
<a href="/datenschutz.html">Datenschutz</a>
</nav>
</div>
</div>
</footer>
<script>
// Setze aktuelles Jahr
document.getElementById('currentYear').textContent = new Date().getFullYear();
</script>
Ich würde aber möglichst auf inline Scripts verzichten. Schau dir dazu auch das Tutorial JavaScript Sicherheit an:
Fallback: JavaScript deaktiviert
Falls JavaScript deaktiviert ist, kannst du einen Fallback-Wert direkt im HTML einfügen:
<p class="footer-text">© <span id="currentYear">2025</span> DevPanicZone. Alle Rechte vorbehalten.</p>
Das JavaScript überschreibt dann "2025" mit dem aktuellen Jahr. Wenn JavaScript aus ist, bleibt "2025" stehen.
Vorteile der automatischen Jahr-Aktualisierung:
- Kein manuelles Update am 1. Januar nötig
- Copyright ist immer aktuell
- Funktioniert auf allen Seiten automatisch
- Eine Zeile Code, unendlicher Nutzen
Erweiterung: Zeitraum anzeigen (z.B. 2023-2025)
Wenn deine Website seit 2023 besteht, kannst du einen Zeitraum anzeigen:
<p class="footer-text">© 2023-<span id="currentYear"></span> DevPanicZone. Alle Rechte vorbehalten.</p>
Oder noch schlauer: Zeige nur das Startjahr, wenn es das aktuelle Jahr ist:
// ============================================================================
// CURRENT YEAR im Footer - Erweiterte Version
// ============================================================================
const yearElement = document.getElementById('currentYear');
if (yearElement) {
const startYear = 2023; // Gründungsjahr der Website
const currentYear = new Date().getFullYear();
// Wenn aktuelles Jahr = Startjahr: "2023"
// Wenn aktuelles Jahr > Startjahr: "2023-2025"
if (currentYear === startYear) {
yearElement.textContent = startYear;
} else {
yearElement.textContent = `${startYear}-${currentYear}`;
}
}
Ergebnis:
- 2023:
© 2023 DevPanicZone - 2024:
© 2023-2024 DevPanicZone - 2025:
© 2023-2025 DevPanicZone
Mehr aus DevPanicZone!
Tutorials werden geladen...