Uhrzeit in Div aktualisieren

M

mafiamix

Mitglied
Hallo,

ich möchte mit recht einfachen Mitteln eine Uhrzeit bzw. bisher nur den Timestamp-Code in einem Div anzeigen lassen. Dieser Div-Container soll jede Sekunden aktualisiert werden, so dass die Seite nicht neu geladen werden muss.

Bisher hab ich es mit dem Code hier versucht:

HTML: 
	function timeticker(worktime) {
	
		var i =0;
		var zeitnow		= (".time().");
		var visitzeit	= 0;

		document.getElementById(\"bauzeitdiv\").innerHTML = '';

		
		zeitnow			= (visitzeit + zeitnow);
		
		
		
		
		for(i = 0; worktime < zeitnow; i++){
	
			visitzeit	= (visitzeit + 1000);
			zeitnow		= (zeitnow + visitzeit);
			
			var myInhalt = document.getElementById(\"bauzeitdiv\").innerHTML;

			var finish = ".$bauzeit." - zeitnow;
			
			//document.getElementById(\"bauzeitdiv\").innerHTML = myInhalt + ' und i: ' + i + ' <';
			document.getElementById(\"bauzeitdiv\").innerHTML = finish;
			
			//alert(myInhalt+'<<');
			
			
			i = i+1;
		}
	
	}
	//setInterval('timeticker(".$bauzeit.")', 1000);
</script>

Das ganze ist in php eingebettet, so dass z. B. per time() das aktuelle Timestamp-Datum ermitelt und in die Variable von JS geschrieben wird.
Ich hab es versucht, mit einem Intervall ständig aktualisieren zu lassen, allerdings wird die Zahl dann nur 1x in das Div geschrieben - eine weitere Aktualisierung findet nicht mehr statt, obwohl der Intervall anscheinend weiterhin das Script aufruft (kann man mit alert prüfen, so dass jede Sekunde eine Meldung erscheint).
Weiß jetzt leider auch nicht mehr weiter und bei den fertigen Scripten mit AJAX usw. blick ich nicht durch. Bin nicht gerade der Java-Script Spezialist.



Danke schon mal für eure Hilfe.
 
Hi,

da bist du wohl mit einem HTTP-Request besser aufgestellt, denn dein von PHP ausgelieferte Javascript nimmt in dieser Form anschliessend keine Verbindung mehr zum Server auf.

mfg Maik
 
Hab schon sowas, dass der Timestamp-Code über GET zu einer php-Datei übermittelt wird. Dort wird dann der Code in das Datum umgewandelt. Wollte eigentlich eine andere Methode nehmen, weil ich eigentlich erwartet habe, dass da Umwandeln mit einer Datei, die jede Sekunde aufgerufen werden soll, mehr Traffic braucht.
 
Ist es dir wichtig dass die Uhrzeit des Servers genutzt wird oder kann auch die Clientseitig eingestellte Uhrzeit angezeigt werden?
 
Hi,

hier ein Beispiel, in dem ein Countdown über Ajax initialisiert wird.

Die verwendete Ajax-Klasse (clAjax) wurde leicht modifiziert aus Sven Mintels Tutorial HTTP-Requests unter Kontrolle behalten entnommen.

Das Countdown-Script (secondCount) entstammt dem Thread Ganz einfacher Countdown mit php Quelle.

Wirklich interessant ist der Teil, in dem der Countdown initialisiert wird (initCountdown). Hier wird der Ajax-Request abgesetzt, der ein PHP-Script anstösst. Dieses liefert die Differenz der aktuellen Serverzeit zu einer vordefinierten Endzeit in Sekunden zurück. Diese Differenz wird auf der Clientseite einer lokalen JS-Variable (lngSekunden) zugewiesen, die als Grundlage für den Countdown dient.

Um sicher zu stellen, dass auf der Clientseite nicht manipuliert wird, könnte die Initialisieren des Countdowns in periodischen Abständen erneut stattfinden. Somit ist gewährleistet, dass die richtige Zeitdifferenz verwendet wird.

Beispiel:
Code: 
<html>
<head>
<title>JS - Countdown mit Ajax</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
Object.prototype.extendOpts = function(objOpts){
  for(strEntry in objOpts)
    this[strEntry] = objOpts[strEntry];
}

/* Ajax-Klasse
 *
 * Eigenschaften des Objekts im Parameter objArgs:
 * -----------------------------------------------
 * method  - (string) gewünschte Methode (post, get ..)
 * async   - (bool) Asynchroner (true) oder synchroner (false) Request
 * data    - (string) Datenstring mit Request-Parametern (z.B. text=1&args=2)
 * nocache - (bool) Daten sollen gecached werden (false), ohne Caching (true)
 * url     - (string) Request-URL
 */
clAjax = function(objArgs){
  // Basis-Objekt mit Default-Werten
  var objAjax = {
    method: "GET",
    async: true,
    nocache: true,
    data: ''
  };

  // Objekt erweitern
  objAjax.extendOpts(objArgs);

  // Erweiterung des Basis-Objektes um die Methode zum Ausführen des Requests
  objAjax.request = function(){
    try{
      // Erstellen des XMLHttpRequest-Objekts
      this.xmlReq = window.XMLHttpRequest ? new XMLHttpRequest()
	              													: new ActiveXObject("Microsoft.XMLHTTP");

      // Methode anpassen
      this.method = this.method.toUpperCase();

      // String für send-Methode generieren
      this.sendData = (this.method.toUpperCase() == "GET")? ((document.all && !window.opera)?null:true) : this.data;

      // Aufbereiten der URL
      this.url = ((this.method == "POST") || (this.data == ""))
      // Falls es sich um einen POST-Request handelt oder der Request-String leer ist -> nur URL
	                ? this.url
      // Falls es sich um einen GET-Request handelt und Request-Daten vorhanden sind
	                : (
	                    (this.url.indexOf('?') == -1)
	                      ? this.url + '?' + encodeURI(this.data)  // Falls es sich um die ersten Parameter handelt -> ? voranstellen
	                      : this.url + '&' + encodeURI(this.data)  // Sonst - Parameter mit Kaufmanns-UND anhängen
	                  );

      // Initialisieren des Requests
      this.xmlReq.open(this.method, this.url, this.async);

      // Falls es sich um einen POST-Request handelt -> senden der bei POST erforderlichen Request-Header
      if(this.method == "POST"){
        this.xmlReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        this.xmlReq.setRequestHeader("Content-length", this.sendData.length);
        this.xmlReq.setRequestHeader("Connection", "close");
      }

      // Falls die Nutzung des Cache verhindert werden soll
      if(!typeof this.nocache || this.nocache){
        this.xmlReq.setRequestHeader("If-Modified-Since", "Thu, 01 Jan 1970 00:00:00 GMT");
      }

      // Falls eine verarbeitende Callback-Funktion übergeben wurde
      if((typeof this.onComplete != 'undefined') && (typeof this.onComplete == 'function')){
        var _this = this;
        this.xmlReq.onreadystatechange = function(){
        if((_this.xmlReq.readyState==4) && (_this.xmlReq.status==200)){
          // Übergebene Fkt. aus dem window-Kontext mit Basis-Objekt (xmlReq) aufrufen
          // objAjax.xmlReq entspricht XMLHttpRequest-Objekt
          //window[objAjax.onComplete](objAjax);
          _this.onComplete(_this);
        }
      };
    }

    // Request absetzen
    this.xmlReq.send(this.sendData);

    }catch(objExcNoRequest){
      try{
        console.log('Fehler:AJAX.request()');
    }catch(objExcNoConsole){}
  }
}

  // Rückgabe des Basis-Objekts
  return objAjax;
}

// Sekunden
var lngSekunden = null;
var hTimer = null;

// Counter initialisieren
function initCounter(){
  // Evtl. laufenden Timer stoppen
  if(hTimer) window.clearTimeout(hTimer);

  // Zeitdifferenz mittels Ajax von einem PHP-Script ermitteln lassen
  clAjax({
    'url': 'xmlhttp_request_dummy.php',
    'data': new Date().getTime(),
    'method': 'post',
    'onComplete': function(objAjax){
      lngSekunden = objAjax.xmlReq.responseText; // Rückgabe in Sekunden
      secondCount();
    }
  }).request();
}

function secondCount(){
  // Stunden berechnen
  intStunden = Math.floor(lngSekunden/(60*60));
  // Stunden formatieren
  intStunden = (intStunden < 10) ? "0"+intStunden : intStunden;
  // Restsekunden berechnen
  lngHelpSekunden = lngSekunden - intStunden*60*60;

  // Minuten berechnen, formatieren und Restsekunden berechnen
  intMinuten = Math.floor(lngHelpSekunden/60);
  intMinuten = (intMinuten < 10) ? "0"+intMinuten : intMinuten;
  intSekunden = lngHelpSekunden - intMinuten*60;

  // Sekunden formatieren
  intSekunden = (intSekunden < 10) ? "0"+intSekunden : intSekunden;

  // Ausgabestring generieren
  strZeit = intStunden + ":" + intMinuten + ":" + intSekunden;

  // Ausgabestring in DIV mit ID="countdownID" schreiben
  document.getElementById("countdownID").innerHTML = strZeit;

  // Sekunden dekrementieren
  lngSekunden--;
  // Falls der Countdown noch nicht zurückgezählt ist
  if(lngSekunden >= 0)
    // Countdown-Funktion erneut aufrufen
    hTimer = window.setTimeout("secondCount()", 1000);
}
 //-->
</script>
</head>
<button onclick="initCounter();">Countdown starten</button>
<button onclick="window.clearTimeout(hTimer);">Countdown stoppen</button>
<body>
  <div id="countdownID"></div>
</body>
</html>

Mein PHP-Script zu Testen sah wie folgt aus:
Code: 
<?php
$lngEnd = mktime(0,0,0,9,19,2009);
$lngStart = time();
echo($lngEnd - $lngStart);
?>

Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück