Digital-Uhr mit Datumsanzeige für Portalbox

1070er · Jan 3rd 2023

Hallo, ich suche eine Digital-Uhr mit Datumsanzeige für eine Portalbox.

Wo also quasi der Tag und das Datum angezeigt wird und dann die aktuelle Uhrzeit.

Dienstag, 03.01.2023

10:03:26

So in der Art.

Gibt es etwas ähnliches?

Danke für kurze Info.

walkingwolves · Jan 3rd 2023

HTML

<html>

<body onload="startTime()">


<div id="txt"></div>

<script>
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>

</body>
</html>

Display More

Als HTML box zb.

Viel Spaß damit.

Quelle verlingt

1070er · Jan 3rd 2023

Hallo

walkingwolves

Ja Danke, die Richtung stimmt schon mal.

Tag und Datum werden nicht angezeigt und die Schrift müsste etwas größer sein.

walkingwolves · Jan 3rd 2023

Code

<script language="JavaScript" type="text/javascript">

var datum = new Date();
wochentag=new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag","Samstag");

document.write(wochentag[datum.getDay()]);
document.write(" der "+ datum.getDate() +" / "+ (datum.getMonth()+1)+" / "+datum.getFullYear());

</script>

Nutze das mal

MfG

1070er · Jan 3rd 2023

Ja, prima. Habe beide jetzt kombiniert.

Geht die Schrift etwas Größer?

So in etwa

walkingwolves · Jan 3rd 2023

Bin ich schon bei am schauen .

walkingwolves · Jan 3rd 2023

HTML

<script language="JavaScript" type="text/javascript">
var datum = new Date();
wochentag=new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag","Samstag");
document.write(wochentag[datum.getDay()]);
document.write(" der "+ datum.getDate() +" . "+ (datum.getMonth()+1)+" . "+datum.getFullYear());
</script>
<html>
<body onload="startTime()">
<div id="txt" style="font-size:30px;"></div>
<script>
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}


</script>

</body>
</html>

Display More

schau mal . so in Etwa ??

Zeile 9 kannst du PX anpassen das ist die größe der Uhrzeit.

Sollte nun klappen.

1070er · Jan 3rd 2023

Yepp, so hab' ich mir das vorgestellt.

Vielen Dank. Was bin ich Dir schuldig?

walkingwolves · Jan 3rd 2023

Supi das freut mich .

Nichts . Nen danke reicht völlig aus.

MfG

PoooMukkel · Jan 3rd 2023

Quote from walkingwolves

Nichts . Nen danke reicht völlig aus.

Ich gebe dir auch gern ein Danke, obwohl ich die Box nicht einsetzen werde. Vielen Dank!

Jens* · Jan 3rd 2023

So gehts auch:

HTML

<html>
<head>
<style>
#clock {
  font-size: 40px;
  text-align: center;
  color: blue;
}
#date {
  font-size: 20px;
  text-align: center;
  color: red;
}
</style>
<script>
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  var d = today.getDate();
  var mo = today.getMonth()+1;
  var y = today.getFullYear();
  var dayNames = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
  var day = today.getDay();
  m = checkTime(m);
  s = checkTime(s);
  var monthNames = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
  document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
  document.getElementById('date').innerHTML = dayNames[day] + ", " + d + ". " + monthNames[mo-1] + " " + y;
  var t = setTimeout(startTime, 500);
}
function checkTime(i) {
  if (i < 10) {i = "0" + i};  // fügt eine führende Null hinzu
  return i;
}
</script>
</head>

<body onload="startTime()">

<div id="clock"></div>
<div id="date"></div>

</body>
</html>

Display More

1070er · Jan 3rd 2023

Ohja, auch sehr schön.Danke.

**Tim Düsterhus** · Jan 5th 2023

Hallo,

ich möchte bemerken, dass Tags wie <html>, <body>, <head> und <style> nichts in einer Box zu suchen haben und die HTML-Struktur der Software zerstören.

Zur Anzeige eine „statischen“ Uhrzeit kann übrigens auch eine Template-basierte Box mit {TIME_NOW|plainTime} genutzt werden.

Wasserlasser · Jan 5th 2023

Wie waere dann die Uhrzeitbox oben einzurichten, damit nichts zerstoert wird?

Gruss

**Tim Düsterhus** · Jan 5th 2023

Hallo,

das hier in einer HTML-Box sollte funktionieren und kümmert sich dann auch direkt um eine korrekte Lokalisierung:

HTML

<div>
    <div></div>
<script>
(function (script) {
    const container = script.parentNode.querySelector('div');
    const dateFormat = new Intl.DateTimeFormat(
        document.documentElement.lang,
        { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
    );
    const timeFormat = new Intl.DateTimeFormat(
        document.documentElement.lang,
        { hour: 'numeric', minute: 'numeric', second: 'numeric' }
    );
    
    function update() {
        const now = new Date();
        container.innerHTML = `
          ${dateFormat.format(now)}
          ${timeFormat.format(now)}
        `;
    }
    
    update();
    setInterval(() => { requestAnimationFrame(update); }, 500);
})(document.currentScript);
</script>    
</div>

Display More

1070er · Jan 10th 2023

Tim Düsterhus

Mhmmmm, liese sich diese in Deiner Ausführung auch realisieren?

Uhrzeit mittig zentriert und Datum in Farbe darunter.

**Tim Düsterhus** · Jan 10th 2023

Hallo,

Quote from 1070er

Mhmmmm, liese sich diese in Deiner Ausführung auch realisieren?

selbstverständlich, passe einfach das HTML in Zeile 18/19 an. Ich habe den Quellcode bewusst als „Template-String“ mit Platzhaltern geschrieben, um derartige Anpassungen zu erleichtern.

1070er · Jan 10th 2023

Quote from Tim Düsterhus

Hallo,
selbstverständlich, passe einfach das HTML in Zeile 18/19 an. Ich habe den Quellcode bewusst als „Template-String“ mit Platzhaltern geschrieben, um derartige Anpassungen zu erleichtern.

Da ich leider wenig bewandert in der Programmiertechnik mit HTML ect. bin frage ich mal in die Runde ob einer von Euch mir da unter die Arme greifen kann. Gerne auch per PN .

Aze · Jan 10th 2023

Quote from 1070er

Da ich leider wenig bewandert in der Programmiertechnik mit HTML ect. bin frage ich mal in die Runde ob einer von Euch mir da unter die Arme greifen kann. Gerne auch per PN .

So:

HTML

<div>
    <div class="clockTime"></div>
    <div class="clockDate"></div>

<script>
(function (script) {
    const displayTime = script.parentNode.querySelector('.clockTime');
    const displayDate = script.parentNode.querySelector('.clockDate');
    const dateFormat = new Intl.DateTimeFormat(
        document.documentElement.lang,
        { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
    );
    const timeFormat = new Intl.DateTimeFormat(
        document.documentElement.lang,
        { hour: 'numeric', minute: 'numeric', second: 'numeric' }
    );
    
    function update() {
        const now = new Date();
        displayTime.innerHTML = `
        ${timeFormat.format(now)}
        `;
        displayDate.innerHTML = `
        ${dateFormat.format(now)}
        `;
    }
    
    update();
    setInterval(() => { requestAnimationFrame(update); }, 500);
})(document.currentScript);
</script>

</div>

Display More

Sass (Scss)

/* Sidebar clock */
.box[data-box-identifier="com.woltlab.wcf.genericBox24"] {
    
    .boxContent {
        text-align: center;
        
        .clockTime {
            font-size: 28px;
            font-weight: 600;
        }
        
        .clockDate {
            color: #dc2626;
        }
    }
}

Display More

Die 24 bei com.woltlab.wcf.genericBox24 musst du dann mit der ID deiner erstellten Box ersetzen.

ArnoEdwin · Jan 11th 2023

Quote from 1070er

Ja, prima. Habe beide jetzt kombiniert.
Geht die Schrift etwas Größer?
So in etwa

Was ist da zu Ändern, dass es so Ausschaut wie bei Deinem Beispiel?

bei mir kommt nur eine Einfache Textzeile

Mittwoch der 11 / 1 / 2023

Digital-Uhr mit Datumsanzeige für Portalbox

Participate now!

Share

Users Viewing This Thread