Text Zeitabhängig 03
    
 Home • Zeit • Text zeitabhängig Demo  Quellcode  drucken  Seite drucken

 Textausgabe 03  (Uhr + 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 Einsatzmöglichkeit ist vielseitig.

dynamische Uhrzeit + einen von 4 Texten anzeigen


   Funktion

Abhängig von der Tageszeit wird ein für den Zeitbereich vorgegebener Text in das HTML-Dokument geschrieben. Zusätzlich wird die Uhrzeit (dynamisch) angezeigt.


  • formatierte Textausgabe
  • zweistellige Anzeige für Std, Min, Sek
  • 4 uhrzeitabhängige Unterscheidungen

Eine übliche HTML-Seite kann man nach der Anzeige im Browser nicht mehr ändern. Inhalte von Formularfelders schon. Deshalb erfolgt die Anzeige der Begrüßung hier in einem Formularfeld, das mit CSS-Angaben so an die Seitenfarben angepasst wurde, dass es nicht mehr zu erkennen ist.

Bei einer Darstellung auf einer anderen Hintergrundfarbe müsste man die Angaben für background-color (Hintergrundfarbe) und color (Textfarbe) ändern.

 vom Script generierte Anzeige 



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

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




   Aufwand für die Einbindung

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

Kurzinfo JavaScript in ein HTML-Dokument 'einbauen'

Der Text wird im Formularfeld an der Stelle angezeigt, wo Sie das Formularfeld notieren. 
<form>
<input readonly class="anzeige" type="text" id="Ausgabefeld">
</form>



   Textformatierung

Die Anzeige erfolgt in einem Formularfeld von 350 Pixel Länge. Durch Anpassung der Farben und Abschaltung der Ränder, ist es nicht mehr als Formularfeld zu erkennen. Änderungen für die Länge des Formularfeldes, Hintergrund- und Textfarbe im CSS-Block bei 'input.anzeige' eintragen.
<style type="text/css">
<!--

input.anzeige {

/* Text */
 font-family:Verdana, sans-serif;
 color: #0070C0;
 font-weight:normal;
 font-size:12px;

/* Hintergrundfarbe */
 background: #FFFFFF;

 border: none;
 width: 450px;
}

-->
</style>



   4 Texte

Innerhalb der Funktion Textauswahl() werden die Texte abhängig vom übergebenen Stundenwert ausgewählt. Zeitvorgaben in meinem Beispiel:
0 - 5 Uhr, 5 - 11 Uhr, 11 - 17 Uhr, 17 - 24 Uhr

Ändern Sie die Zeitwerte und/oder Texte (innerhalb der Anführungszeichen), je nach Einsatzbereich des Scriptes.
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



Die Variante 2 einer uhrzeitabhängigen Begrüßung / einer uhrzeitabhängigen Textausgabe ist ein etwas aufwendigers Script. Es unterscheidet 8 Uhrzeitbereiche und zusätzlich auch noch die Wochentage (1 von 7). Sie haben also (wenn sie möchten) 56 Möglichkeiten der Differenzierung.

Text abhängig von Wochentag und Uhrzeit

Minikalender und Begrüßungstext