Text Zeitabhängig 03
 HomeZeit • Text zeitabhängig Demo  Quellcode  drucken  Seite drucken

Textausgabe 03  (Uhrzeit + Begrüßung, je nach Tageszeit)

Eine tageszeitabhängige Begrüßung für den Webseitenbesucher 'Guten Morgen ... ' In diesem Anwendungsbeispiel habe ich statt der statischen Uhrzeit eine dynamische Anzeige vorgesehen. Die Einsatzbereiche sind vielseitig, beschränken sich nich auf einen Begrüßungstext und können durch Erweiterungen der Zeitspannen ausgebaut werden.
textanzeige zeitabhängig uhrzeit dynamisch

Begrüßungstext mit dynamischer Uhrzeit

dynamische Uhrzeit + einen von 4 Texten anzeigen

Abhängig von der Tageszeit wird ein für den Zeitbereich vorgegebener Text in das HTML-Dokument geschrieben. Im meinem Modul sind zur Zeit vier Texte vorgesehen, die Sie abhängig für den Einsatzbereich anpassen. Die Zeitspannen für die Anzeige können Sie selbst festlegen. Zusätzlich zum Text wird die Uhrzeit (dynamisch) angezeigt.



Eine übliche HTML-Seite kann man nach der Anzeige im Browser nicht mehr ändern. Inhalte von Formularfeldern und Div-Bereichen schon. Deshalb erfolgt die Anzeige der Begrüßung hier in einem Div-Bereich, der mit CSS-Angaben an das Seitenlayout angepasst wurde.

Die Textformatierung und -ausrichtung kann leicht angepasst werden. Bei einer Darstellung vor einer anderen Hintergrundfarbe müsste man die Angaben für background-color (Hintergrundfarbe) und color (Textfarbe) ändern.

 vom Script generierte Anzeige 
Begrüßung


Zeitspannen festlegen (default: 4)

Hier werden vier Zeitspannen unterschieden, Sie können die Zeiten natürlich anpassen.

00:00 - 05:59 Uhr: Immer noch vor dem Bildschirm?
06:00 - 11:59 Uhr: Einen schönen Morgen wünsche ich
12:00 - 17:59 Uhr: Hallo, willkommen auf meinen Seiten
18:00 - 24:00 Uhr: Ich wünsche Ihnen einen angenehmen Abend

Wenn man das Script ein wenig anpasst und die Vergleichsoperatoeren ändert, könnte man auch diese Unterscheidung erreichen. Beispiel:

00:00 - 07:59 Uhr - Unser Notdienst ist erreichbar unter 0177-12345678
08:00 - 11:59 Uhr - Sie erreichen uns zur Zeit unter 01234-5678
12:00 - 13:59 Uhr - Sie erreichen uns ab 14 Uhr wieder unter 01234-5678
14:00 - 17:59 Uhr - Sie erreichen uns zur Zeit unter 01234-5678
18:00 - 24:00 Uhr - Unser Notdienst ist erreichbar unter 0177-12345678




   Aufwand für die Einbindung

1) Scriptcode und CSS-Anweisung im Head notieren
2) Div-Bereich im Body notieren
3) Texte anpassen
4) Zeitvorgaben anpassen

Kurzinfo JavaScript in ein HTML-Dokument 'einbauen'




Verwendete Technik für die Anzeige

Die vom Script ermittelten Größen für die Darstellung der Zeit im Iso-Format werden der Variablen 'IsoZeitString' zugeordnet. Im Body-Bereich habe ich einen Div-Bereich mit der ID 'Zeitanzeige' an der Stelle notiert, wo die Anzeige erfolgen soll.

<div id="Zeitanzeige">Begrüßung</div>
Begrüßung


Im Script erziele ich mit der Anweisung
document.getElementById('Zeitanzeige').innerHTML = Anzeige;
, dass der Inhalt der Variablen innerhalb des Div-Bereichs eingeblendet wird.



CSS-Formatierungen für die Texte

Für den Div-Bereich mit der ID 'Zeitanzeige' lege ich mit CSS bestimmte Eigenschaften fest:
<style type="text/css">
<!--

#Zeitanzeige {
font-family: Verdana, sans-serif;
color: #0070C0;
font-weight: normal;
font-size: 12px;
background: #FFFFFF;
border: none;
width: 450px;
text-align: center;
font-weight: bold;
border: 1px dotted #000000;
padding: 10px;
}

-->
</style>



4 Texte festlegen

Innerhalb der Funktion Textauswahl() werden die Texte abhängig vom Stundenwert ausgewählt. Ändern Sie die Zeitwerte und/oder Texte (innerhalb der Anführungszeichen), je nach Einsatzbereich des Scriptes.
Zeitvorgaben in meinem Beispiel:

00:00 - 05:59 Uhr, 06:00 - 11:59 Uhr, 12:00 - 17:59 Uhr, 18:00 - 24:00 Uhr

function Textauswahl(StdAktuell)  {
  if (StdAktuell <= 5)
  Text = "Immer noch vor dem Bildschirm?";
  else
  if (StdAktuell <= 11)
  Text = "Einen schönen Morgen wünsche ich";
  else
  if (StdAktuell <= 17)
  Text = "Hallo, willkommen auf meinen Seiten";
  else
  Text = "Ich wünsche Ihnen einen angenehmen Abend";
return Text
}
Demo ansehen



Das könnte Sie auch interessieren: