Zur Navigation

Geöffnet/geschlossen mit Zeit [3]

21 Jörg

Da die Zeilen in einer <tr> enthalten sind, kannst du diese mit der jeweiligen ID auszeichnen:

<tr id="Freitag">
<td>Freitag</td>
<td>10.00 - 11.30 Uhr</td>
</tr>

Die Style-Anweisung würde ich an das Ende des Scriptes einfügen. Das Script selbst sollte unterhalb der Tabelle stehen, so dass die IDs beim Ausführen des Scriptes bekannt sind.

14.06.2020 09:29 | geändert: 14.06.2020 09:33

22 Marco T. (Gast)

Ich denke, ich bin zu doof für das Script :-)

Der heutige Tag wird nicht fett angezeigt.

Dann hätte ich noch eine zusätzliche Frage. Ist es möglich, eine übergeordnete Regel hinzuzufügen, dass wenn z.B. der Tag 2020-06-25 ist, geschlossen steht.


<p>Jetzt: <span id="is-open"></span></p>

<script>
var openingHours = [
[ 'Montag', '10:00', '11:30' ],
[ 'Dienstag', '10:00', '11:30' ],
[ 'Dienstag', '14:00', '18:00' ],
/* ... und so weiter ... */
];

var weekdays = [
'Sonntag',
'Montag',
'Dienstag',
'Mittwoch',
'Donnerstag',
'Freitag',
'Samstag'
];
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var day = now.getDate();
var weekday = now.getDay();

var open = false;
for (var i = 0; i < openingHours.length; i++) {
var openingHour = openingHours[i];
var openingDay = openingHour[0];
var beginTime = openingHour[1].split(':');
var endTime = openingHour[2].split(':');
var begin = new Date(year, month, day, beginTime[0], beginTime[1]);
var end = new Date(year, month, day, endTime[0], endTime[1]);
if (
weekdays[weekday] == openingDay &&
now >= begin &&
now < end
) {
open = true;
}
}

var spanIsOpen = document.querySelector('#is-open');
if (open) {
spanIsOpen.innerText = 'geöffnet';
spanIsOpen.style.color = 'green';
} else {
spanIsOpen.innerText = 'geschlossen';
spanIsOpen.style.color = 'red';
}
</script>

<tr id="Montag">
<td>Montag</td>
<td>10.00 - 11.30 Uhr</td>
</tr>

<tr id="Dienstag">
<td>Dienstag</td>
<td>10.00 - 11.30 Uhr</td>
</tr>

<tr id="Mittwoch">
<td>Mittwoch</td>
<td>10.00 - 11.30 Uhr</td>
</tr>

<tr id="Donnerstag">
<td>Donnerstag</td>
<td>10.00 - 11.30 Uhr</td>
</tr>

<tr id="Freitag">
<td>Freitag</td>
<td>10.00 - 11.30 Uhr</td>
</tr>

16.06.2020 08:47

23 Jörg

Wie von mir geschrieben:

Das Script selbst sollte unterhalb der Tabelle stehen, so dass die IDs beim Ausführen des Scriptes bekannt sind.

Der Browser liest den HTML-Quelltext von oben nach unten ein und führt das Script sofort aus. Da er die Tabelle mit den IDs dadrunter noch nicht eingelesen hat, wird dort auch nichts eingefettet.

Darüber hinaus fehlt deiner Tabelle das <table> Element

Edit:

... und diese Zeile muss natürlich auch noch an das Ende des Scripts:

document.querySelector('#' + weekdays[weekday]).style.fontWeight = 'bold';

... anderfalls ist ja kein Wunder, wenn nichts eingefettet wird.

16.06.2020 11:39 | geändert: 16.06.2020 11:41

24 Marco T. (Gast)

Ah, das wusste ich nicht, dass das Script danach kommt (Die Style-Anweisung würde ich an das Ende des Scriptes einfügen. Das Script selbst sollte unterhalb der Tabelle stehen, so dass die IDs beim Ausführen des Scriptes bekannt sind. - Diese zwei Sätze habe ich überlesen, sorry). Schon wieder etwas gelernt. Herzlichen Dank Jörg.

Dann hätte ich noch eine zusätzliche Frage. Ist es möglich, eine übergeordnete Regel hinzuzufügen, dass wenn z.B. der Tag 2020-06-25 ist, geschlossen steht.

16.06.2020 16:27

25 Jörg

Das Datum als Feiertag definieren:

var holiday = '2020-06-25';

... und dann die for Schleife zum Auslesen der Öffnungszeiten nur noch ausführen, wenn der Feiertag nicht gleich der heutige Tag ist:

var open = false;
if (holiday != now.toISOString().substring(0, 10)) {
    for (var i = 0; i < openingHours.length; i++) {
        /* ... */
    }
}

18.06.2020 18:46

26 Marco T. (Gast)

Hallo Jörg

Besten Dank. Ich habe leider zu wenig Ahnung, wo ich das ganze im Script integrieren muss. Danke aber trotzdem und einen schönen Tag.

Gruss Marco

24.06.2020 14:30

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]