Mobirise-Tutorials.com

Code: Alles auswählen

<?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>';

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;
}

Code: Alles auswählen

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

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>

Code: Alles auswählen

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

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>

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()
]);

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