Uhrzeit und Datum im Footer

Beitrag von **Volker** » Do 18. Dez 2025, 21:27

Hier mal ein kleines Script das eine Uhr mit Sekundenanzeige und Datum im Footer anzeigt.

uhrzeit.php:

<?php
date_default_timezone_set('Europe/Berlin');

$tage = [
    'Sunday'=>'Sonntag','Monday'=>'Montag','Tuesday'=>'Dienstag',
    'Wednesday'=>'Mittwoch','Thursday'=>'Donnerstag',
    'Friday'=>'Freitag','Saturday'=>'Samstag'
];

$monate = [
    'January'=>'Januar','February'=>'Februar','March'=>'März',
    'April'=>'April','May'=>'Mai','June'=>'Juni',
    'July'=>'Juli','August'=>'August','September'=>'September',
    'October'=>'Oktober','November'=>'November','December'=>'Dezember'
];

echo '<span id="footerClock" class="footer-uhrzeit"
data-time="'.date('Y-m-d H:i:s').'"
data-day="'.$tage[date('l')].'"
data-date="'.date('d').'. '.$monate[date('F')].' '.date('Y').'">
'.$tage[date('l')].', '.date('d').'. '.$monate[date('F')].' '.date('Y').' – '.date('H:i:s').' Uhr
</span>';

css in Mobirise für die Uhrzeit:

Code: Alles auswählen

.footer-uhrzeit {
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  color: #ccc;
  display: block;
  text-align: center;
  margin-top: 10px;
}

Einbau in Mobirise:
Das an die Stelle im Footer wo die Uhrzeit erscheinen soll:

Code: Alles auswählen

<?php include 'uhrzeit.php'; ?>

CSS anpassen nach Bedarf

Das Javascript in die Seiteneigenschaften End of <body>

Code: Alles auswählen

<script>
function updateClock() {
    const now = new Date();
    const pad = n => n.toString().padStart(2, '0');

    document.getElementById('footerClock').innerText =
        now.toLocaleDateString('de-DE', {
            weekday: 'long',
            day: '2-digit',
            month: 'long',
            year: 'numeric'
        }) + ' – ' +
        pad(now.getHours()) + ':' +
        pad(now.getMinutes()) + ':' +
        pad(now.getSeconds()) + ' Uhr';
}

updateClock();
setInterval(updateClock, 1000);
</script>

Beitrag von **Tommy Herrmann** » Fr 19. Dez 2025, 03:48

Moin,

wäre dafür nicht JavaScript angebrachter? Ich meine, wer stellt schon gerne seine vielleicht bereits gut im Ranking gelisteten Mobirise HTML-Seiten nachträglich auf PHP um, sodass diese dann von den Suchmaschinen nicht mehr gefunden werden - und das nur zur Anzeige der Uhrzeit

Hier hatte ich das vor Jahrzehnten mal in NOF eingebaut - gleich oben:

http://www.nof-tutorials.com/

Oder hier als Beispiel im globalen Footer ganz unten:

https://www.mobirise-tutorials.com/Template/

Im Footer:

Code: Alles auswählen

<div id="uhrzeitAnzeige" class="mbr-text mb-0 mbr-fonts-style" mbr-theme-style="display-7"></div>

Das JavaScript dann in der globalen HTML der Site-Einstellungen "Before </body> code":

Code: Alles auswählen

<script>
function aktualisiereUhrzeit() {
    const jetzt = new Date();
    
    // Optionen für das Datum und den Wochentag (deutsch)
    const datumOptionen = { 
        weekday: 'long', // Ganzer Name des Wochentags (z.B. "Freitag")
        year: 'numeric', 
        month: '2-digit', // Monat als 2 Ziffern (z.B. "12")
        day: '2-digit' // Tag als 2 Ziffern (z.B. "19")
    };
    
    // Optionen für die Uhrzeit
    const zeitOptionen = { 
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit', 
        hour12: false // 24-Stunden-Format
    };

    // Formatierung des Datums und Wochentags (z.B. "Freitag, 19.12.2025")
    const datumString = jetzt.toLocaleDateString('de-DE', datumOptionen);

    // Formatierung der Uhrzeit (z.B. "05:25:38")
    const zeitString = jetzt.toLocaleTimeString('de-DE', zeitOptionen);
    
    // Den gesamten String zusammensetzen
    const anzeigeText = `${datumString}, ${zeitString} Uhr`;

    // Das HTML-Element finden und den Text aktualisieren
    document.getElementById('uhrzeitAnzeige').innerHTML = anzeigeText;
}

// Die Funktion einmal sofort aufrufen, damit die Anzeige sofort sichtbar ist
aktualisiereUhrzeit();

// Die Funktion alle 1000 Millisekunden (1 Sekunde) wiederholen lassen
setInterval(aktualisiereUhrzeit, 1000);
</script>

Hier noch eine Spielerei mit einer analogen Uhr:

https://www.mobirise-tutorials.com/Busi ... atures7-10

Beitrag von **Volker** » Fr 19. Dez 2025, 16:40

Moin,

1. Soll die Serverzeit angezeigt werden und nicht die Uhrzeit vom PC des Users

2. Wie kommst Du darauf das PHP Seiten schlechter gefunden werden von Google oder anders gewichtet werden ?

„Google ist es egal, ob die Seite mit PHP, HTML oder von einem Hamster ausgeliefert wird – Hauptsache der Content stimmt.“

Beitrag von **Tommy Herrmann** » Fr 19. Dez 2025, 16:49

Das habe ich doch überhaupt nicht geschrieben. Ich sprach von der nachträglich Umstellung von .html auf .php. Dadurch entstehen neue URLs und das erarbeitete SEO-Ranking ist erst einmal weg.

Beitrag von **Volker** » Fr 19. Dez 2025, 17:21

Ja sorry,

aber auch das könnte man lösen mit einer einfachen Umleitung. Natürlich nur für eine Uhrzeit übertrieben.
Ich hab eh meinen Server so eingestellt das er auch PHP im HTML ausgeben kann. Ist ja auch nur als Code Schnipsel gedacht

Beitrag von **Tommy Herrmann** » So 21. Dez 2025, 06:00

Na ja - wer stellt schon seinen Computer falsch ein

Windows 11 synchronisiert die Systemuhr standardmäßig und automatisch alle paar Stunden über einen Zeitserver (NTP). Diese ist daher, normalerweise, sehr genau.

Richtig ist, dass diese Zeit manipulierbar wäre und daher nicht sicher. Zur einfachen Anzeige ist das auch sicherlich OK, bei z.B. wichtigen Datenbankeinträgen würde ich auch PHP verwenden.

Hier deswegen noch ein Kompromiss, so wird mit einem PHP-Skript die Serverzeit geladen und dann über AJAX in der HTML-Seite ausgegeben:

https://www.mobirise-tutorials.com/Test ... index.html

PHP-Skript: "serverzeit.php" - bitte auch so benennnen, denn das JavaScript liest aus dieser Datei:

Code: Alles auswählen

<?php
date_default_timezone_set('Europe/Berlin');
header('Content-Type: application/json; charset=utf-8');

$now = new DateTimeImmutable();

echo json_encode([
    'unix' => $now->getTimestamp()
]);

Einfügung in Mobirise HTML-Seite:

Code: Alles auswählen

<!-- ========================================= -->
<!-- MOBIRISE HTML-BLOCK: SERVERZEIT-ANZEIGE -->
<!-- ========================================= -->

<div id="serverClock"
     style="font-family:inherit;font-size:1rem;">
  Lade Uhrzeit …
</div>

<script>
/*
  Dieses Script:
  1) Holt EINMAL die Serverzeit (PHP)
  2) Zählt danach lokal weiter
  3) Vermeidet wiederholte AJAX-Requests
*/

(function () {

  const output = document.getElementById('serverClock');
  let serverTime = null;

  const weekdays = [
    'Sonntag', 'Montag', 'Dienstag',
    'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'
  ];

  function pad(n) {
    return String(n).padStart(2, '0');
  }

  function formatDate(d) {
    return weekdays[d.getDay()] + ', ' +
      pad(d.getDate()) + '.' +
      pad(d.getMonth() + 1) + '.' +
      d.getFullYear() + ', ' +
      pad(d.getHours()) + ':' +
      pad(d.getMinutes()) + ':' +
      pad(d.getSeconds()) + ' Uhr';
  }

  function tick() {
    if (!serverTime) return;
    output.textContent = formatDate(serverTime);
    serverTime = new Date(serverTime.getTime() + 1000);
  }

  // === SERVERZEIT EINMAL HOLEN ===
  fetch('serverzeit.php?_=' + Date.now())
    .then(r => r.json())
    .then(data => {
      serverTime = new Date(data.unix * 1000);
      tick();
      setInterval(tick, 1000);
    })
    .catch(() => {
      output.textContent = 'Zeit nicht verfügbar';
    });

})();
</script>

<!-- ========================================= -->
<!-- ENDE MOBIRISE HTML-BLOCK -->
<!-- ========================================= -->

Beitrag von **Volker** » So 21. Dez 2025, 09:03

Viele Wege führen nach Rom

Das ist natürlich die eleganteste Art

Mobirise-Tutorials.com

Uhrzeit und Datum im Footer

Uhrzeit und Datum im Footer

Re: Uhrzeit und Datum im Footer

Re: Uhrzeit und Datum im Footer

Re: Uhrzeit und Datum im Footer

Re: Uhrzeit und Datum im Footer

Re: Uhrzeit und Datum im Footer

Re: Uhrzeit und Datum im Footer

Wer ist online?