currentYear im Footer

Automatische Aktualisierung des aktuellen Jahres mit JavaScript.

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

Im FOOTER_TEMPLATE in generate-navigation.js ist das Jahr bereits mit Fallback-Wert eingebaut:

HTML
<footer class="site-footer">
    <div class="container">
        <div class="footer-content">
            <p class="footer-text">© <span id="currentYear">2025</span> DevPanicZone. Alle Rechte vorbehalten.</p>
            <nav class="footer-nav" aria-label="Footer-Navigation">
                <a href="/impressum.html">Impressum</a>
                <a href="/datenschutzerklaerung.html">Datenschutz</a>
            </nav>
        </div>
    </div>
</footer>

Der Fallback-Wert 2025 wird angezeigt, falls JavaScript deaktiviert ist. Das JavaScript überschreibt ihn mit dem aktuellen Jahr.

JavaScript-Code

In main.js ist die Funktion setCurrentYear() definiert:

JavaScript
// ===================================
// CURRENT YEAR IM FOOTER
// ===================================

function setCurrentYear() {
    const yearSpan = document.getElementById('currentYear');
    if (yearSpan) {
        yearSpan.textContent = new Date().getFullYear();
    }
}

setCurrentYear();

Die Funktion wird innerhalb des DOMContentLoaded Events aufgerufen, sodass das Element garantiert existiert.

Falls du es nicht in einer separaten JavaScript-Datei haben möchtest, kannst du es auch direkt im Footer einfügen:

HTML
<footer class="site-footer">
    <div class="container">
        <div class="footer-content">
            <p class="footer-text">© <span id="currentYear">2025</span> DevPanicZone. Alle Rechte vorbehalten.</p>
            <nav class="footer-nav" aria-label="Footer-Navigation">
                <a href="/impressum.html">Impressum</a>
                <a href="/datenschutzerklaerung.html">Datenschutz</a>
            </nav>
        </div>
    </div>
</footer>

<script>
    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:

Zum Tutorial JavaScript Sicherheit ↵
Warum automatisch?

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:

HTML
<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:

JavaScript
// ============================================================================
// 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...