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

Füge einen <span id="currentYear"></span> im Copyright-Text ein:

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

JavaScript
// ============================================================================
// 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;
}

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"></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:

Zum Tutorial JavaScript Sicherheit ↵

Fallback: JavaScript deaktiviert

Falls JavaScript deaktiviert ist, kannst du einen Fallback-Wert direkt im HTML einfügen:

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

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