Hier noch ein Beispiel, das die Öffnungszeiten eines Geschäfts abbildet und steuert. Man kann damit ein oder mehrere Inhaltselemente während der Öffnungszeiten bereitstellen und andere, wenn geschlossen ist.
Benötigt wird ein Template z.B.: js_openclosed.html5 und ein bisschen CSS.
Mir reinem Javascript werden dort je nach Öffnungszeiten die Body-Klassen: 'open' oder 'closed' gesetzt.
Die anzuzeigenden Inhaltselemente oder auch einzelne <HTML-Tags>, erhalten die Klassen: 'offen' bzw. 'geschlossen'.
Öffnungszeiten:
MO - FR 09:30-13:00 Uhr und 14:00-16:00 Uhr
SA 10:00-12:30 Uhr
SO geschlossen
Pure Javascript:
Code:
// templates/<evtl. Templateordner>/js_openclosed.html5
<script>
(function () {
var d = new Date();
var day = d.getDay();
var hours = d.getHours();
var minutes = d.getMinutes();
if (day >= 1 && day <= 5) { // MO(1) - FR(5)
if ((hours == 9 && minutes >= 30 || hours > 9 && hours < 13) || (hours >= 14 && hours < 16)) {
document.body.classList.add('open');
} else {
document.body.classList.add('closed');
}
} else if (day == 6) { // SA(6)
if (hours >= 10 && (hours == 12 && minutes < 30 || hours < 12)) {
document.body.classList.add('open');
} else {
document.body.classList.add('closed');
}
} else { // SO(0)
document.body.classList.add('closed');
}
})();
</script>
Ein bisschen CSS:
Code:
.offen,
.geschlossen {
display: none;
}
.open .offen,
.closed .geschlossen {
display: block;
}
Das war's schon.
Mit der JS Funktion getMonth() lässt sich das auch für die Steuerung während einzelner Monate aufbohren.