Zeitgesteuertes Einblenden einer Grafik

[Ceero]

Hallo zusammen,

ich versuche es hinzubekommen, dass eine Grafik nur zu einer bestimmten Uhrzeit, in meinem Beispiel nur um 15:30 Uhr, eingeblendet wird, wenn jemand auf die Seite geht, bzw. refresht. Hab schon einiges versucht, komme aber nicht auf das gewünschte Ergebnis.

<img id="bild" src="..\mein_bild.jpg" border=" " height="50px" width="50px" alt=" " style="display:none;"/>

<script language="javascript"type="text/javascript">
  display_check_bild();
  function display_bild()
  {var now = new Date();
  hour = now.getHours();
  minutes = now.getMinutes();
  var display_hour = 15;
  var display_min = 30;
  if (hour = display_hour && minutes = display_min)
  {document.getElementById('bild').style.display="";}
  }
</script>

Ganz klasse wäre es, wenn die Möglichkeit bestehen würde, dass die Grafik zu diesem Zeitpunkt ausgetauscht wird. Also bis 15:29 Uhr wird Bild1 angezeigt, um 15:30 Uhr Bild2 und ab 15:31 wieder Bild1. Daran habe ich mich allerdings noch nicht versucht. Kann mir da vielleicht jemand helfen, der mehr Ahnung von der Materie hat?

Danke und viele Grüße Ceero

[Tabellenkalk]

Hallo,

  display_check_bild();
  function display_bild()

als erstes fällt auf, dass du eine Funktion aufrufst und eine andere definierst...

Gruß
Kalk

[Ceero]

Hallo Kalk,

danke für den Hinweis. Habe es auch umgehend geändert, das Ergebis bleibt leider unverändert.

Es muss irgendwie an den Miuten liegen, die nicht richtig angenommen werden. Ändere ich

  if (hour = display_hour && minutes = display_min)

zu

  if (hour = display_hour)

wird die Grafik angezeigt, wenn die richtige "Stunde" ist. Ich weiß leider nicht, wie ich display_hour und display_min richtig zusammenführen kann.

Gruß Ceero

[peter]

Hallo,

Ändere ich

  if (hour = display_hour && minutes = display_min)

zu

  if (hour = display_hour)

ich würd mal versuchen, VERGLEICHSOPERATOREN statt ZUWEISUNGSOPERATOREN zu verwenden.

Gruß Peter

[bobby]

Moin,

ich würd mal versuchen, VERGLEICHSOPERATOREN statt ZUWEISUNGSOPERATOREN zu verwenden.

Darf ichs mal verlinken?

Vergleichsoperator vs. Zuweisungsoperator

Gruß Bobby

[bobby]

Moin,

display_check_bild();

anderer Funktionsname als definiert

function display_bild() {var now = new Date(); hour = now.getHours(); minutes = now.getMinutes();

Warum speicherst du dies in extra Variablen? Nutze sie direkt!

var display_hour = 15; var display_min = 30;

Hier wäre besser du erstellst die Funktion mit 2 Argumenten und übergibst diese von "außen"... damit kannst du die Funktion beliebig of wiederverwenden

if (hour = display_hour && minutes = display_min)

Hier muss du Vergleichen, nicht zuordnen (== oder === statt =)

{document.getElementById('bild').style.display="";}

die Style-Eigenschaft display darf nicht leer sein. Nutze hierzu doch bitte den Standard (inline oder block je nach Element)

Ganz klasse wäre es, wenn die Möglichkeit bestehen würde, dass die Grafik zu diesem Zeitpunkt ausgetauscht wird. Also bis 15:29 Uhr wird Bild1 angezeigt, um 15:30 Uhr Bild2 und ab 15:31 wieder Bild1. Daran habe ich mich allerdings noch nicht versucht.

Behebe erstmal die anderen Fehler. Dann würde ich an deiner Stelle erst diese Problematik angehen.

Damit du den Effekt siehst, dein Script mal optimiert:

display_bild(15,30);

function display_bild(hour,minute)
{
    var now = new Date();
    if (now.getHours() == hour && now.getMinutes() == minute) {
        document.getElementById('bild').style.display="inline";
    }
}

Gruß Bobby

[Ceero]

Hallo Bobby,

vielen Dank für die Tipps. Bin leider nicht wirklich firm, was die Thematik angeht, habe aber verstanden, was du erklärt hast.

Das von dir umgeschriebene Script habe ich soeben getestet, gibt aber leider auch nicht das gewünschte Ergebnis aus. Ist mein Vorhaben grundsäztlich überhaupt möglich?

Habe natürlich (15,30) auf (14,21) angepasst, damit ich es testen kann.

Gruß Ceero

[peter]

Hallo,

wie sieht dein Script jetzt aus? Was funktioniert nicht?

Gruß peter

[Ceero]

Hallo peter,

das Script ist jetzt genau so, wie es mir von Bobby vorgeschlagen wurde:

<img id="bild" src="..\mein_bild.jpg" border=" " height="50px" width="50px" alt=" " style="display:none;"/>

<script language="javascript"type="text/javascript">
display_bild(14,21); 
function display_bild(hour,minute) { 
var now = new Date(); 
if (now.getHours() == hour && now.getMinutes() == minute) 
{ document.getElementById('bild').style.display="inline"; } 
}
</script>

Die Grafik wird weiterhin nicht angezeigt, wenn ich es mit der aktuellen Uhrzeit teste.

Gruß Ceero

[peter]

Hi,

wird das Bild angezeigt, wenn du gleich im IMG-Tag display auf 'inline' setzt?

Gruß peter

[Ceero]

Hi,

ja, das hatte ich gerade schon getestet und es wird dann angezeigt. Allerdings wird es anschließend nicht wieder ausgeblendet, auch die eingestellte Uhrzeit ist vorbei ist.

Gruß Ceero

[peter]

Hi,

dann schau nach, was wann passiert:

zum Beispiel:

<img id="bild" src="..\mein_bild.jpg" border=" " height="50px" width="50px" alt=" " style="display:none;"/>

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

display_bild(14,21); function display_bild(hour,minute) {

alert('script laeuft');

var now = new Date(); if (now.getHours() == hour && now.getMinutes() == minute) {

alert('Abfrage OK');

document.getElementById('bild').style.display="inline"; } } </script>

usw.

Gruß
peter

[peter]

Hi,

gibts das Bild beim Aufruf der Funktion überhaupt schon? Was sagt denn die Fehlerkonsole?

Gruß

Peter

[Ceero]

hi Peter,

ja, das gibt es schon.

Ich habe festgestellt, dass der Fehler hier liegen muss:

if (now.getHours() == hour && now.getMinutes() == minute) 

Führe ich folgende Alerts aus, bekomme ich getHours und getMinutes korrekt angezeigt.

alert(now.getHours());
alert(now.getMinutes());

die Kombination beider Variablen hingegen gibt nur die Minuten aus, ohne die Stunde davor:

alert(now.getHours() && now.getMinutes());

Gruß Ceero

[peter]

Hi,

die Kombination beider Variablen hingegen gibt nur die Minuten aus, ohne die Stunde davor:

alert(now.getHours() && now.getMinutes());

da haste wirder etwas ein wenig durcheinandergebracht.

Versuchs mal mit:

alert(now.getHours()+', '+now.getMinutes());

Gruß

Peter

[Ceero]

Hi Peter,

okay, so funktioniert es, die Ausgabe sagt '15,33'.

Ansonsten läuft aber alles durch.

Gruß Ceero

[peter]

Hi

okay, so funktioniert es, die Ausgabe sagt '15,33'.

Haste auch verstanden, warum?

Ansonsten läuft aber alles durch.

Was soll das heisen?

Gruß

Peter

[Ceero]

Hi Peter,

ehrlich gesagt, nein... Mag daran liegen, das ich nicht verstehe, warum ich mit einem '&' keine Variablen hintereinander ausgeben lassen kann. Hatte mir erhofft, damit einfach nur '1533' angezeigt zu bekommen. Mag an meinem VBA-Denken liegen :( Werde wohl nochmal Operatoren büffeln müssen...

'Läuft durch' sollte heißen, das ansonsten alles richtig ausgegeben wurde und kein Fehler aufgetreten ist.

Mein Bild hingegen bleibt unsichtbar.

Gruß Ceero

[bobby]

Moin,

Mag daran liegen, das ich nicht verstehe, warum ich mit einem '&' keine Variablen hintereinander ausgeben lassen kann.

Weil & in Javascript nunmal nicht der Verkettungsoperator ist!

Werde wohl nochmal Operatoren büffeln müssen...

Ja, das solltest du dringend tun

'Läuft durch' sollte heißen, das ansonsten alles richtig ausgegeben wurde und kein Fehler aufgetreten ist.

Mein Bild hingegen bleibt unsichtbar.

Hast du schonmal geschaut, ob die Bildurl stimmt? Oder ob das Bild ÜBERHAUPT angesprochen wird (spricht, dass das Bild im DOM gefunden wird)

Gruß Bobby

[Ceero]

Hi Bobby,

ja, die URL stimmt, das Bild wird angezeigt, wenn ich das Script lösche und die Seite nur mit dem img-Tag öffne.

Gruß Ceero

[bobby]

Moin,

Hi Bobby,

ja, die URL stimmt, das Bild wird angezeigt, wenn ich das Script lösche und die Seite nur mit dem img-Tag öffne.

und wird es denn im DOM gefunden?

Konsole über F12 öffnen und in der JS-Konsole mit

console.info(document.getElementById('bild'))

prüfen

Gruß Bobby

[Ceero]

Hi Bobby,

das wird ausgegeben:

console.info(document.getElementById('bild'))
undefined
<img width="50px" height="50px" border=" " style="display:none;" alt=" " src="Bild1.jpg" id="bild">

Gruß Ceero

[bobby]

Moin,

console.info(document.getElementById('bild')) undefined

Das bedeutet, dass das Bild nicht gefunden wird. Damit kann natürlich auch keine Änderung der Style-Eigenschaft Display vorgenommen werden. ;) da muss der Fehler wo anders liegen. Hast du einen Link? Hast du mal in JSFiddle versucht das Beispiel nach zu vollziehen?

Gruß Bobby

[peter]

Hi

hast du in deinem Code auch wirklich das Script NACH! dem IMG-Tag eingebunden?

Gruß

Peter

[Tabellenkalk]

Hallo,

Ich habe festgestellt, dass der Fehler hier liegen muss:

nö, da baust du einfach Unsinn.

alert(now.getHours() && now.getMinutes());

Informiere dich, was && für ein Operator ist.

Gruß
Kalk

[Gunnar Bittersmann]

@@Ceero

die Kombination beider Variablen hingegen gibt nur die Minuten aus, ohne die Stunde davor:

alert(now.getHours() && now.getMinutes());

Das liegt daran, dass die „logischen Operatoren“ in JavaScript nicht wirklich solche sind. Auf boolschen Werte true und false angewandt verhalten sich && und || tatsächlich wie AND bzw. OR und das Ergebnis ist true oder false.

Anderen Werte werden aber nicht in boolsche Werte konvertiert, sondern das Ergebnis ist – je nachdem, ob der erste Operand falsy ist oder nicht – der Wert des ersten oder des zweiten Operanden, siehe MDN.

Von Mitternacht bis 00:59 liefert now.getHours() && now.getMinutes() nicht die Minuten, sondern die Stunde (0), weil deren Wert dann falsy ist.

LLAP 🖖

[bobby]

Moin,

ja, das hatte ich gerade schon getestet und es wird dann angezeigt. Allerdings wird es anschließend nicht wieder ausgeblendet, auch die eingestellte Uhrzeit ist vorbei ist.

das anschließende Ausblenden lässt sich auch nur mit einem Intervall lösen. Du willst eigentlich, dass eein Bild zu einer bestimmten Uhrzeit automatisch eingeblendet und in der nächsten Minute wieder weg ist? habe ich das so richtig verstanden?

Gruß Bobby

[Ceero]

Hi Bobby,

ja, genau so soll es funktionieren. Das Bild soll wirklich nur in dieser einen Minute angezeigt werden. Und das muss es auch nur, wenn man genau in dieser Minute auf die Seite wechselt, bzw. manuell refresht.

Gruß Ceero

[Gunnar Bittersmann]

@@bobby

{document.getElementById('bild').style.display="";}

die Style-Eigenschaft display darf nicht leer sein.

Da wage ich mal zu widersprechen. style.display = "" setzt die Eigenschaft auf den Defaultwert für dieses Element …

Nutze hierzu doch bitte den Standard (inline oder block je nach Element)

… und ist insbesondere dann nützlich, wenn man sich nicht darum kümmern will (oder kann!), was nun der jeweilige Defaultwert ist. Siehe Tabellenzeilen ein- bzw. ausblenden.

LLAP 🖖

[bobby]

Moin,

… und ist insbesondere dann nützlich, wenn man sich nicht darum kümmern will (oder kann!), was nun der jeweilige Defaultwert ist. Siehe Tabellenzeilen ein- bzw. ausblenden.

OK, ist ein Argument... ich habe es immer so gehalten, den Browser nicht im "dunkeln" tappen zu lassen. Denn per CSS könnte ja acuh was anders gesetzt sein (z.B. display:inline-block)... Das würde dann nicht wieder hergestellt! Aber du hast grundsätzlich recht, dass es auch ohne Angabe funktioniert. Halte ich persönlich eben nicht für so elegant.

Gruß Bobby

[MudGuard]

Hi,

Da wage ich mal zu widersprechen. style.display = "" setzt die Eigenschaft auf den Defaultwert für dieses Element …

Da wage ich mal, zu widersprechen.

Es setzt eben nicht für ein span den Wert auf inline oder für ein div auf block, und es setzt auch nicht den default-Wert für display.

style.display = "" sorgt (so wie es auch style.display="husseldiguggeldigu" machen würde") dafür, daß an dieser Stelle der Kaskade kein gültiger und damit also gar kein Wert gesetzt ist, so daß die restliche Kaskade zum Zug kommt (die sonst gegen lokale Styles ja wenig Chancen hat).

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Da wage ich mal zu widersprechen. style.display = "" setzt die Eigenschaft auf den Defaultwert für dieses Element …

Da wage ich mal, zu widersprechen.

Stattgegeben.^[1]

Es setzt eben nicht für ein span den Wert auf inline oder für ein div auf block, und es setzt auch nicht den default-Wert für display.

style.display = "" sorgt (so wie es auch style.display="husseldiguggeldigu" machen würde") dafür, daß an dieser Stelle der Kaskade kein gültiger und damit also gar kein Wert gesetzt ist,

Da wiederum wage ich zu widersprechen.

style.display="husseldiguggeldigu" sorgt nicht dafür, dass ein ungültiger Wert gesetzt wird, sondern bewirkt gar nichts.

style.display="" (oder auch style.display=null^[2]) hingegen sorgt dafür, dass ein vorher gesetzter Wert gelöscht wird und damit – wie du sagtest – „die restliche Kaskade zum Zug kommt“.

Codepen: Ghostbusters!

LLAP 🖖

---

1. Auch wenn der Widerspruch formal unrichtig ist. Der einfache Infinitiv mit „zu“ war auch in der alten Rechtschreibung ohne Komma. ;-) ↩︎

2. Wobei style.display wohl immer vom Typ String ist. Auch null führt zum Wert "". ↩︎

[Gunnar Bittersmann]

@@Ceero

Ganz klasse wäre es, wenn die Möglichkeit bestehen würde, dass die Grafik zu diesem Zeitpunkt ausgetauscht wird. Also bis 15:29 Uhr wird Bild1 angezeigt, um 15:30 Uhr Bild2 und ab 15:31 wieder Bild1.

Dazu müsste entweder das Script ständig laufen, d.h. in regelmäßigen Abständen (alle 60 Sekunden? alle 30?), die aktuelle Uhrzeit mit 15:30 vergleichen. setTimeout oder setInterval wären deine Freunde.

Oder das Script berechnet, wie lange es noch bis 15:30 ist und startet eine CSS-Animation mit entsprechender Verzögerung.

LLAP 🖖

[Ceero]

Hallo Gunnar,

es soll nicht so sein, dass man vor der geöffneten Seite sitzen kann, und plötzlich das Bild angezeigt wird. Vielmehr soll es so sein, dass die Grafik nur dann angezeigt wird, wenn man genau in der einen Minute die Seite betritt, bzw F5 drückt.

Gruß Ceero

[bobby]

Moin,

es soll nicht so sein, dass man vor der geöffneten Seite sitzen kann, und plötzlich das Bild angezeigt wird. Vielmehr soll es so sein, dass die Grafik nur dann angezeigt wird, wenn man genau in der einen Minute die Seite betritt, bzw F5 drückt.

Du sollst nicht widersprechen... :) ... Wenn das Bild automatisch ausgeblendet werden soll, kommst du um eine der genannten Funktionen nicht drum herum!!

Gruß Bobby

[Ceero]

Da habe ich mich in meinem ersten Post leider etwas falsch ausgedrück, sorry dafür :(

Es geht alles nicht darum, dass etwas auf der bereits geöffneten Seite geschieht, sondern eine Veränderung auf der Seite soll über einen Refresh erzeugt werden (bzw. natürlich auch wenn man die Seite aufruft).

Gruß Ceero

[Gunnar Bittersmann]

@@Ceero

es soll nicht so sein, dass man vor der geöffneten Seite sitzen kann, und plötzlich das Bild angezeigt wird. Vielmehr soll es so sein, dass die Grafik nur dann angezeigt wird, wenn man genau in der einen Minute die Seite betritt, bzw F5 drückt.

OK. Und die Grafik soll dann um 15:31:00 wieder wechseln? Das heißt u.U. nur den Bruchteil einer Sekunde zu sehen sein?

LLAP 🖖

[quincunx]

Hallo Ceero

siehe auf codePen mein Beispiel.

gr qx

[Ceero]

Hi quincunx,

Klasse, das funktioniert! :)

Vielen Dank!!

Gruß Ceero