Automatische Textänderung nach Uhrzeit -> Autorefresh?

[hulpmiddel]

Hallo liebe Forengemeinde,

ich habe für eine Homepage den folgenden JS-Code gebastelt

<form action="">
      <script type="text/javascript" language="javascript1.5">

      var jetzt = new Date();
      var Std = jetzt.getHours();
      var Min = jetzt.getMinutes();
      var Day = jetzt.getDay();

document.write('<font size="+1" color="#FFFF00" face="Helvetica">');
if (Day == 6 && Std >= 19)
{
  document.write("Montag geöffnet ab 11:00 Uhr Derzeit geschlossen. ");
}
if (Day == 0)
{
  document.write("Morgen geöffnet ab 11:00 Uhr Heute geschlossen. ");
}
else
{
if (Std <= 24 && Std >= 19 && Day >= 1 && Day <= 5)
{
  document.write("Morgen geöffnet ab 11:00 Uhr. Derzeit geschlossen.");
}
if (Std <= 9 && Std >= 00)
{
  document.write("Heute geöffnet ab 11:00 Uhr. Derzeit geschlossen.");
}
  if (Std >= 11 && Std < 19)
  {
    document.write("");
}
if (Std == 10 && Min >= 00)
{
      var Rest = 60 - Min;
      document.write("Heute geöffnet ab 11:00 Uhr. Öffnet in " + Rest + " Minuten.");
  
}
  if (Std >= 11 && Std < 19)
  {
    document.write("Heute geöffnet bis 19:00 Uhr. ");
}
  if (Std >= 11 && Std < 18)
  {
    document.write("Geöffnet - Guten Appetit! ;-)");
}
if (Std == 18 && Min >= 00)
{
      var Rest = 60 - Min;
      document.write(" Schließt in " + Rest + " Minuten.");
  }
  else
  {
    document.write("");
  }
}
      //]]>

      </script>
    </form>

Dieser Dient dazu, dem Besucher auf dem ersten Blick zu zeigen: Der Laden hat auf, der Laden hat zu oder er öffnet in 30 Minuten. Nun habe ich aber das Problem wenn der Benutzer 10 Minuten auf der Homepage verweilt und nichts angklickt dort immernoch 30 Minuten steht anstatt bspw. 20. Einen gesamten Seitenrefresh der Minütlich stattfindet, empfinde ich als die nicht optimalste lösung, vorallem wenn der User langsames Internet oder einen langsamen PC hat. Gibt es da nicht ein "softere" variante... habe mal was von: document.getElementById() gehört, aber ich hab keine ahnung welche Funktion man in eine Funktion einfügen muss o.ä... ich bräuchte da mal ein paar Tips... bin ein echter Neuling was das angeht.

Also wenn jemand Zeit oder Lust hat, immer her mit den Ideen. Möchte mein kleines Projekt gerne einwandfrei zum laufen bekommen

LG Benny

 

[ComFreek]

Hallo und herzlich Willkommen im Forum,

bevor du dir jQuery, ähnliches oder unnütze Buttons hinzufügst, probiere erstmal diesen Weg:

document.write solltest du nicht benutzen, v.a. weil es direkt ins Dokument schreibt, dort wo der Skriptblock sich befindet.

Ich würde das ganze in ein eigenes Element schreiben:

<div id="openingHours"></div>

Somit brauchst du nur folgendes zu schreiben:

document.getElementById("openingHours").innerHTML = str;

Vorausgesetzt, dass in str der Text/HTML drin steht, den du anzeigen möchtest.

Dazu würde ich deinen Code so umschreiben:

function getOpeningHours() {			
  var jetzt = new Date();
  var Std = jetzt.getHours();
  var Min = jetzt.getMinutes();
  var Day = jetzt.getDay();
	
  var str = "";
   
  str += '<font size="+1" color="#FFFF00" face="Helvetica">';
  if (Day == 6 && Std >= 19)
  {
    str += "Montag geöffnet ab 11:00 Uhr Derzeit geschlossen. ";
  }
  if (Day == 0)
  {
    str += "Morgen geöffnet ab 11:00 Uhr Heute geschlossen. ";
  }
  else
  {
    if (Std <= 24 && Std >= 19 && Day >= 1 && Day <= 5)
    {
      str += "Morgen geöffnet ab 11:00 Uhr. Derzeit geschlossen.";
    }
    if (Std <= 9 && Std >= 00)
    {
      str += "Heute geöffnet ab 11:00 Uhr. Derzeit geschlossen.";
    }
    if (Std == 10 && Min >= 00)
    {
      var Rest = 60 - Min;
      str += "Heute geöffnet ab 11:00 Uhr. Öffnet in " + Rest + " Minuten.";
    }
    if (Std >= 11 && Std < 19)
    {
      str += "Heute geöffnet bis 19:00 Uhr. ";
    }
    if (Std >= 11 && Std < 18)
    {
      str += "Geöffnet - Guten Appetit! ;-)";
    }
    if (Std == 18 && Min >= 00)
    {
      var Rest = 60 - Min;
      str += " Schließt in " + Rest + " Minuten.";
    }
  }
  return str;
}

function updateOpeningHours() {
  document.getElementById("openingHours").innerHTML = getOpeningHours();
}

updateOpeningHours();
window.setInterval(updateOpeningHours, 15000); // alle 15 000ms = 15s

Zwei Dinge noch

<script type="text/javascript" language="javascript1.5">

Wer hat denn dir das beigebracht? Das language-Attribut wurde (a) schon lange durch das type-Attribut ersetzt und (b) wenn schon, dann jedenfalls nicht "javascript1.5".

<font size="+1" color="#FFFF00" face="Helvetica">

Der font-Tag ist schon lange veraltet, lieber CSS benutzen.
Übrigens wird der Font-Tag, der im JS dem String str hinzugefügt wird, nie geschlossen.
Folgendes solltest du vor "return str;" hinzufügen:

str += '</font>';

@Phantom6208
Was hat denn deine Antwort mit dem Thema zu tun?
a) Wozu jQuery?
b) Statt Buttonklick-Aktualisierung möchte der Fragesteller eine automatische => window.setInterval!
c) Man vergebe mir die Wortwahl, aber wie kommst du verdammt nochmal auf jQuary? Du wurdest schon in zwei Beiträgen gestern darauf hingewiesen.

Ist zwar schön, dass du helfen wolltest, aber bitte bemühe dich um die Qualität deiner Antworten

 

[hulpmiddel]

Vielen, vielen dank... so ähnlich wie Du es oben beschrieben hast, habe ich es jetzt umgesetzt und anderem auch durch die mithilfe anderer bin ich dann zum Ziel gelangt. Nur die Textformatierung hatte ich noch nicht auf die Reihe bekommen, aber durch:

text += '<font size="+1" color="#FFFF00" face="Helvetica">';

funktioniert es jetzt hoffentlich. Danke!

<script type="text/javascript" language="javascript1.5">

Die Grundform des Codes habe ich mir aus dem Internet zusammengesucht, habe 5 Stunden gebraucht für die erstellung des Codes, die richtige Formatierung für die Homepage und die erstellung aller funktionen... google and friends waren also meine Lehrer.

Könnte ich denn irgendwelche Nachteile (Kompatibilitätsprobleme, funktionsprobleme ö.ä) durch die verwendung des aktuellen Codes haben?

Den vollendeten Code habe ich noch nich ausprobiert, zurzeit ist noch der "document.write" Online, werde es aber Morgen mal testen.
http://www.iss-wurst.de, dort ist das Ergebnis zu "bewundern".

Und hier der aktuelle Code:

<form action="">
	<span id="text"></span>
	<script type="text/javascript">
	(function updateText(){
		var jetzt = new Date();
		var Std = jetzt.getHours();
		var Min = jetzt.getMinutes();
		var Day = jetzt.getDay();

		var text = "";

text += '<font size="+1" color="#FFFF00" face="Helvetica">';

		if (Day == 6 && Std >= 19){
		  text += "Montag geöffnet ab 11:00 Uhr. Derzeit leider geschlossen.";
		}
		if (Day == 0){
		  text += "Morgen geöffnet ab 11:00 Uhr. Heute leider geschlossen.";
		}
		else {
			if (Std <= 24 && Std >= 19 && Day >= 1 && Day <= 5){
				text += "Morgen geöffnet ab 11:00 Uhr. Derzeit leider geschlossen.";
			}
			if (Std <= 9 && Std >= 00){
				text += "Heute geöffnet ab 11:00 Uhr. Derzeit leider geschlossen.";
			}
			if (Std >= 11 && Std < 19){
				text += "";
			}
			if (Std == 10 && Min >= 00){
				var Rest = 60 - Min;
				text += "Heute geöffnet ab 11:00 Uhr. Öffnet in " + Rest + " Minuten.";
			}
			if (Std >= 11 && Std < 19){
				text += "Heute geöffnet bis 19:00 Uhr.";
			}
			if (Std >= 11 && Std < 18){
				text += " Geöffnet. Guten Appetit!";
			}
			if (Std == 18 && Min >= 00){
				var Rest = 60 - Min;
				text += " Schließt in " + Rest + " Minuten.";
			}
			else {
				text += "";
			}
		}
		document.getElementById("text").innerHTML = text;
		window.setTimeout(updateText, 1000);
	})();
	</script>
</form>

Liebe Grüße und schönen Sonntag !