HTML: Bild durch bedingte Einstellungen anzeigen?

Wie kann ich ein Bild durch eine bedingte Option anzeigen? Es soll z.B. am Donnerstag, wenn die Uhrzeit zwischen 7 bis 21 Uhr ist, ein bestimmtes Bild anzeigen.

<script>
  document.write('<div id="contHour"></div>');
  mainDate = new Date();
  myHour = mainDate.getHours();
  mySeconds = mainDate.getSeconds();
  const weekday = [ "bild1.jpg", "bild2.jpg", "bild4.jpg", "bild14.jpg", "DO14.png", "bild20.jpg", "bild21.jpg" ];
  const d = new Date();
  let day = weekday[d.getDay()];
  <!--	document.getElementById("demo").innerHTML = "<img src='"+day+"' />";>

  if (myHour >= 21 && myHour < 7) { //ab dieser Zeit wird ein bestimmtes Bild angezeigt
    document.getElementById("contHour").innerHTML = '<img src="M7.png" alt="kein Bild" />';
  }
  else if (myHour >= 7 && myHour < 8) {
    document.getElementById("contHour").innerHTML = '<img src="M7.png" alt="kein Bild" />';
  }
  else if (myHour >= 8 && myHour < 9) {
    document.getElementById("contHour").innerHTML = '<img src="M8.png" alt="kein Bild" />';

Answer 1

[TechPech1984]

myHour >= 21 && myHour < 7

also wenn es größer gleich 21 uhr sein soll , sind wir bei 21,22,23

UND wenn es kleiner 7 uhr sein solll dan sind wir bei 0,1,2,3,4,5,6

wie du da jetzt ein UND vorgesschlagen hast, ist mir ein rätzel . UND heisst schnittmenge, siehst du da irgendwo eine schnittmenge ?

du willst

7,8,9,10,...,19,20 haben ?

und dann noch an dem tag donnerstag, also muss du irgendwas finden das diese zeiten erfasst UND den tag .

genauso wie

myHour >= 7 && myHour < 8

das gleiche ist wie

myHour == 7

Comments

[davidrxm]

aber wie kan ich den tag mit einbeziehen

[TechPech1984]

@davidrxm

( von bis ) && day ==

[davidrxm]

Ok danke, sollte ich dan also nach &&day == "DO14.png" eingeben

[TechPech1984]

@davidrxm

ja geht auch oder du nutzt

( von bis ) && d.getDay() == zahl_des_tages

[TechPech1984]

@davidrxm

ich empfhele dir grundlagen im programmieren zu lernen und nciht copy paste ohne sinn und verstand . du musst schon verstehen was du da machst.

Answer 2

[regex9]

Unter der Annahme, dass du für jede Zeitperiode je Wochentag ein anderes Bild hast, wäre ein Array/Objekt sinnvoll, welches die Daten so strukturiert:

const images = [
  [{
    "path": "mondaytill7.jpg",
    "description": "..."
  },
  {
    "path": "monday7to8.jpg",
    "description: "..."
  },
  {
    "path": "monday8to9.jpg",
    "description: "..."
  }],
  /* etc. ... */
];

const today = new Date();
const weekday = today.getDay();
const currentHour = today.getHours();
let imageData;

if (currentHour >= 21 || currentHour < 7) {
  imageData = images[weekday][0];
}
else if (currentHour == 7) {
  imageData = images[weekday][1];
}
else if (currentHour == 8) {
  imageData = images[weekday][2];
}
else {
  imageData = null;
}

if (imageData) {
  const alternativeText = imageData.description.length
    ? `=${imageData.description}`
    : '';
  document.getElementById("contHour").innerHTML = `<img src="${imageData.path}" alt${alternativeText}>`;
}

Beachte, dass das alt-Attribut dazu dient, das Bild inhaltlich sinnvoll zu beschreiben (in deinem Fall würde vermutlich ein Statustext wie: Laden geöffnet / geschlossen, o.ä. darin stehen). Wenn das Bild keinen Inhalt präsentiert, wird der Attributwert weggelassen.

Comments

[davidrxm]

könntest du mir dan bitte wen es gehen würde eine beispiel html erstellen?

[davidrxm]

da ich wirklich noch ein anfänger bin