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" />';
2 Antworten
![](https://images.gutefrage.net/media/user/TechPech1984/1632773764038_nmmslarge__12_0_519_519_b8bdbc8023c4e7722d66db9f2af2d5fd.png?v=1632773764000)
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
![](https://images.gutefrage.net/media/user/TechPech1984/1632773764038_nmmslarge__12_0_519_519_b8bdbc8023c4e7722d66db9f2af2d5fd.png?v=1632773764000)
![](https://images.gutefrage.net/media/user/TechPech1984/1632773764038_nmmslarge__12_0_519_519_b8bdbc8023c4e7722d66db9f2af2d5fd.png?v=1632773764000)
ich empfhele dir grundlagen im programmieren zu lernen und nciht copy paste ohne sinn und verstand . du musst schon verstehen was du da machst.
![](https://images.gutefrage.net/media/user/davidrxm/1657096539957_nmmslarge__0_0_1400_1400_12f863478e3a55ad70794295ebf7770d.png?v=1657096540000)
![](https://images.gutefrage.net/media/user/TechPech1984/1632773764038_nmmslarge__12_0_519_519_b8bdbc8023c4e7722d66db9f2af2d5fd.png?v=1632773764000)
![](https://images.gutefrage.net/media/user/regex9/1455660989427_nmmslarge__0_13_270_270_615d5a3bc6888f4c1486ce2b4d9d8f60.png?v=1455660989000)
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.
![](https://images.gutefrage.net/media/user/davidrxm/1657096539957_nmmslarge__0_0_1400_1400_12f863478e3a55ad70794295ebf7770d.png?v=1657096540000)
![](https://images.gutefrage.net/media/user/davidrxm/1657096539957_nmmslarge__0_0_1400_1400_12f863478e3a55ad70794295ebf7770d.png?v=1657096540000)
könntest du mir dan bitte wen es gehen würde eine beispiel html erstellen?
Ok danke, sollte ich dan also nach &&day == "DO14.png" eingeben