Text Zeitabhängig
 HomeZeit • Text zeitabhängig Demo  Quellcode 

Textausgabe 01  4 unterschiedliche Texte je nach Tageszeit

Eine tageszeitabhängige Begrüßung auf Ihrer Webseite: 'Guten Morgen ... ' oder ein Hinweis auf die telefonische Erreichbarkeit für die Firmenseite: 'Unsere Hotline ist jetzt besetzt'. Die Einsatzmöglichkeit ist vielseitig. Mein Modul kann angepasst werden und sieht zur Zeit 4 Texte vor.
textanzeige zeitabhängig uhrzeit if else innerHTML

Einen von 4 Texten uhrzeitabhängig

UPDATE  Anzeige des Textes in einer Div-Box, Script, Demo, Erklärungen


Das soll mein Modul leisten

Text abhängig von der Tageszeit An allen 7 Tagen der Woche soll einer von 4 unterschiedlichen Texten je nach Tageszeit in die HTML-Seite geschrieben werden. Abhängig von der Sytemzeit wird ein für den Zeitbereich festgelegter Text angezeigt. Zusätzlich kann die Uhrzeit (statisch) angezeigt werden.

Für ein Modul mit täglich unterschiedlichen Texten schauen Sie auf Textausgabe 02

  Demo für die aktuelle Textausgabe mit Uhrzeit  
Starttext


Nach meiner Erweiterung können Sie der Textanzeige optional die aktuelle Uhrzeit voranstellen. Dazu wird der Wert der Variablen "ZeitAnzeigen" abgefragt der '1' (Uhrzeit anzeigen) oder '0' (keine Uhrzeit anzeigen) sein soll. Die Variable dient also als 'Schalter'.
var ZeitAnzeigen = 1;


Aufwand für den Webmaster

1) Scriptcode im Head-Bereich notieren
2) Anzeige-Box im Body-Bereich notieren
3) 4 Texte anpassen
4) Zeitvorgaben anpassen

Kurzinfo JavaScript in ein HTML-Dokument 'einbauen'



Anzeige-Box im Body-Bereich

Der Text wird durch das Script an der Stelle in Ihr Dokument geschrieben, wo Sie die Anzeige-Box notiert haben. Beachten Sie, das ich der Box eine ID zugeordnet habe. Über diese ID kann ich die Box 'adressieren' und den Text innerhalb der Box austauschen.
<div id="InfoText"> Starttext </div>
Das geschieht in meinem Beispiel mit
document.getElementById("InfoText").innerHTML = ... ;
Anzeige im Fließtext?

Die Definition des Anzeigebereichs als Div-Box generiert (ähnlich wie ein Absatz mit <p>) unmittelbar nach der Anzeige einen Zeilenumbruch. Soll Ihre Anzeige im Fließtext erscheinen, verwenden Sie statt der <div>-Tags einfach <span>-Tags. Wichtig: Die ID sollte identisch sein:
<span id="InfoText"> Starttext </span>



1  4 Texte festlegen

4 (unterschiedliche?) Texte müssen festgelegt werden. Ändern Sie die Texte innerhalb der Anführungszeichen, je nach Einsatzbereich des Moduls. Beispiele:
// 4 Texte hier eintragen
var TextModul01 = "Immer noch vor dem Bildschirm?";
var TextModul02 = "Einen schönen Morgen wünsche ich";
var TextModul03 = "Hallo! Willkommen auf meinen Seiten";
var TextModul04 = "Ich wünsche Ihnen einen angenehmen Abend";
oder
// 4 Texte hier eintragen
var TextModul01 = "Der Verkehrsübungsplatz öffnet um 8 Uhr";
var TextModul02 = "Der Verkehrsübungsplatz ist jetzt geöffnet (8 - 18 Uhr)";
var TextModul03 = "Der Platz steht von 18 - 20 Uhr nur Mitgliedern zur Verfügung";
var TextModul04 = "Der Verkehrsübungsplatz ist morgen wieder ab 8 Uhr geöffnet";

2  4 Zeitspannen durch 3 Uhrzeiten festlegen

Innerhalb der Funktion werden die Textmodule abhängig vom aktuellen Stundenwert ausgewählt. Ich definiere für die 3 benötigten Zeitwerte 3 Variablen:
// Uhrzeiten (voller Stundenwert, 4 bedeutet bis 4:59 Uhr)
var Zeit01 = 4;
var Zeit02 = 10;
var Zeit03 = 20;
Die oben eingetragenen Zeitvorgaben resultieren in folgende Zeitspannen:
00:00 - 4:59 Uhr | 05:00 - 10:59 Uhr | 11:00 - 20:59 Uhr | 21:00 - 23:59 Uhr

Durch die Ablage der Zeiten in Variablen müssen die Zeitwerte nicht mehr innerhalb der Abfragen eintragen werden. Das soll Fehler bei der Anpassung ausschießen und alles etwas komfortabler machen. Ändern Sie die Vorgaben je nach Einsatzbereich des Moduls.


3  If-Schleifen für die Abfrage der Zeiten
if (StdAktuell < Zeit01) TextModul = TextModul01;
else if (StdAktuell < Zeit02) TextModul = TextModul02;
else if (StdAktuell < Zeit03) TextModul = TextModul03;
else TextModul = TextModul04;



Textformatierung

Der Text wird innerhalb einer Div-Box dargestellt. Da die Box eine ID hat (InfoText) bietet es sich an, über die Verknüfung mit der ID ein CSS-Style zuzuweisen. Angaben zur Formatierung der Texte tragen Sie im CSS-Block ein.
<style type="text/css">
<!--

#InfoText {
font-family: Verdana,sans-serif;
font-weight: normal;
font-size: 12px;
line-height: 130%;
text-align: left;
color: #000000;
}

-->
</style>
Auch die Position der Box (absolut oder relativ), die Größe und Darstellung könnte man mit einbeziehen. Hier ein Beispiel zur absoluten Positionierung mit Bezug auf die linke obere Ecke des Browserfensters:
<style type="text/css">
<!--

#InfoText {
position: absolute;
top: 180px;
left: 200px;
width: 550px;
height: 200px;
border: 1px solid #000000;
font-family: Verdana,sans-serif;
font-weight: normal;
font-size: 12px;
line-height: 130%;
text-align: left;
color: #000000;
}

-->
</style>
Demo Beispiel 01 ansehen

Beachten Sie: Für die Entscheidung welches Textmodul angezeigt werden soll untersucht das Script die Stundenwerte der aktuellen Uhrzeit beim Öffnen des HTML-Dokuments.







Das könnte Sie auch interessieren: