✔ Html Titel Zeit anzeigen

Joe · 8. November 2011

Ist mir noch garnicht aufgefallen das dies beim IE direckt stehen bleibt. Habs direckt geändert.

Ich versuche grad zu verstehen wie man die aktuelle Clientzeit holt. Ich nehme an das die Zeitdifferenz dann auch immer neu berechnet werden soll?

Ich habe das erst mal so umgesetzt wie von euch aufgezeigt und dies funktioniert auch erstmal. Aber ob ich das so richtig gemacht habe, wie du @wollmaus gerade erklärt hast weiss ich nicht.

HTML:

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1); 
$getAktionen = "SELECT
					Username,
					Aktion,
					ZeitEnde
				FROM
					Aktion
				WHERE
					Username='$Username' AND Aktion='Erkunden'";
	$Aktionen = mysql_query($getAktionen);
	if (!$Aktionen) {
		die ('Etwas stimmte mit dem Query nicht: '.$db->error);
	}
	if (mysql_num_rows($Aktionen) != 0) {
		$rowAktionen = mysql_fetch_assoc($Aktionen);
		$ZeitEndeAktion=$rowAktionen["ZeitEnde"];
		//$ZeitEndeAktion = strtotime("$ZeitEndeAktion");
		$timestamp2 = time();
	}

$differenz = $ZeitEndeAktion - $timestamp2;
?>


	
<script type='text/javascript'>
window.onload=secondCount;
var lngSekunden = <?php echo $differenz;?>;
function secondCount(){
intStunden = Math.floor(lngSekunden/(60*60));
intStunden = (intStunden < 10) ? '0'+intStunden : intStunden;
lngHelpSekunden = lngSekunden - intStunden*60*60;
intMinuten = Math.floor(lngHelpSekunden/60);
intMinuten = (intMinuten < 10) ? '0'+intMinuten : intMinuten;
intSekunden = lngHelpSekunden - intMinuten*60;
intSekunden = (intSekunden < 10) ? '0'+intSekunden : intSekunden;
strZeit = intStunden + ':' + intMinuten + ':' + intSekunden;
document.getElementById('countdown').innerHTML = strZeit;
document.title = strZeit;
lngSekunden--;
if(lngSekunden >= 0) window.setTimeout(function(){secondCount();}, 1000);
if(lngSekunden <= 0) location.href = 'main.php?section=erkunden';
}
</script>
<p>Du bist noch <b><span id="countdown">0</span></b> min unterwegs.</p>
<title></title>

javaDeveloper2011 · 8. November 2011

Hi,

Zeit in Sekunden kann man so hohlen:

Javascript:

var secSince1970 = (new Date()).getTime()/1000;

doc auf selfHTML

Joe · 8. November 2011

Bestens danke habs so notiert

Das Hängen der Zeit passiert dennoch manchmal. Wenn ich das Prinzip Javascript richtig verstanden habe wird sowas ähnliches wie ein andauerndes Refresh angestossen. Der Client fragt im Hintergrund also immer wieder die Daten des Servers ab oder so ähnlich. Wenn das so ist muss dort ja irgendwo das Hängen erzeugt werden oder verstehe ich das völlig falsch? Vieleicht kann ich mich der Problematik um das Thema irgendwo einlesen, wäre für Links oder kurze Erklärungen dankbar.

HTML:

<script type='text/javascript'>
window.onload=secondCount;
var secSince1970 = (new Date()).getTime()/1000;
var lngSekunden = <?php echo $ZeitEndeAktion;?> - Math.floor(secSince1970);
function secondCount(){
intStunden = Math.floor(lngSekunden/(60*60));
intStunden = (intStunden < 10) ? '0'+intStunden : intStunden;
lngHelpSekunden = lngSekunden - intStunden*60*60;
intMinuten = Math.floor(lngHelpSekunden/60);
intMinuten = (intMinuten < 10) ? '0'+intMinuten : intMinuten;
intSekunden = lngHelpSekunden - intMinuten*60;
intSekunden = (intSekunden < 10) ? '0'+intSekunden : intSekunden;
strZeit = intStunden + ':' + intMinuten + ':' + intSekunden;
document.getElementById('countdown').innerHTML = strZeit;
document.title = strZeit;
lngSekunden--;
if(lngSekunden >= 0) window.setTimeout(function(){secondCount();}, 1000);
if(lngSekunden <= 0) location.href = 'main.php?section=erkunden';
}
</script>
<p>Du bist noch <b><span id="countdown">0</span></b> min unterwegs.</p>
<title></title>

javaDeveloper2011 · 8. November 2011

Also JS spielt sich komplett im Browser ab, (OK, abgesehen von Ajax). Da wird jede sek. die Funktion aufgerufen, nur die Art wie JS Zeit misst ist nicht besonders exakt, sollte doch aber jetzt behoben sein, oder?

wollmaus · 9. November 2011

Nö, das wird so noch nichts.

Du musst die Clientzeit bei jedem Funktionsaufruf heranziehen.

Das Problem ist folgendes: der Timeout ist nicht zuverlässig, es kann also gut sein dass er mal später aufgerufen wird, sogar Sekunden später. Passiert das, zählt dein Countdown trotzdem nur 1 Sekunde runter, obwohl tatsächlich schon mehr Zeit vergangen ist.

Was du also tun kannst:
Eingangs nehme die Clientzeit und rechne dazu die durch PHP gegebenen Sekunden der Dauer hinzu, Ergebnis ist die Clientzeit, an der der Countdown abgelaufen ist. Innerhalb der Funktion subtrahiere von dieser Endzeit die aktuelle Clientzeit, Ergebnis sind die noch verbleibenden Millisekunden des Countdowns. Egal wie unregelmässig die Funktion aufgerufen wird, es wird immer mit der echt vergangenen Zeit hantiert(ich nehme an, darum geht es dir).

Die Umsetzung des Ganzen:

Code:

<p>Du bist noch <b><span id="countdown">0</span></b> min unterwegs.</p>

<script  type="text/javascript">
(
  function(duration,node,action,delay)
  {
    var end     = new Date(new Date().getTime()+(duration*1000)).getTime(),
        format  = function(i)
                  {
                    return((i<10)?'0'+i:i);
                  },
        run     = function()
                  {                      
                    var now=new Date().getTime(),
                        diff=Math.floor((end-now)/1000),
                        hh=Math.floor(diff/3600),
                        mm=Math.floor((diff-(hh*3600))/60),
                        ss=diff%60;
                        
                        node.innerHTML  =
                        top.document.title  =
                        [hh,format(mm),format(ss)].join(':');
                        
                        if(diff<1)
                        {
                          action();
                          return;
                        }
                        setTimeout(run,delay);
                    }
    run(); 
  }
)(<?php echo $ZeitEndeAktion;?>, //Laufzeit in Sekunden
  document.getElementById('countdown'), //Zielelement
  function(){location.href='main.php?section=erkunden';}, //finale Funktion
  1000  //Intervall in Millisekunden
  )
</script>

Dies ist ein etwas anderes Konstrukt, eine anonyme Funktion. Sie erwartet 4 Parameter (am ende kommentiert), so kannst du problemlos die Sachen die passieren sollen ändern, ohne im Skriptcode etwas zu ändern.

Weiterhin: Die Funktion wird sofort aufgerufen, du musst den script-block daher im Quelltext hinter dem #countdown-Element platzieren.

Beachte bei allem: nichts, was im Browser abläuft, ist vertrauenswürdig, User können alles manipulieren(z.B. einfach die PC-Uhr umstellen, wodurch sich die Clientzeit ändert).

Eine Demo findest du hier: http://fiddle.jshell.net/rDSFr/show/

Joe · 9. November 2011

@javaDeveloper2011
Leider besteht das Problem immernoch. Auch mit dem Code von Wollmaus.
Konnte nun das "Hängenbleiben" der Zeit eingrenzen. Es hängt des öfteren (nicht immer) wenn man die Maus still lässt und geht genau (mit falscher Zeit) weiter sobald man die Maus bewegt -> ähnlich wie ein Screensaver.

@wollmaus

Eingangs nehme die Clientzeit und rechne dazu die durch PHP gegebenen Sekunden der Dauer hinzu, Ergebnis ist die Clientzeit, an der der Countdown abgelaufen ist. Innerhalb der Funktion subtrahiere von dieser Endzeit die aktuelle Clientzeit, Ergebnis sind die noch verbleibenden Millisekunden des Countdowns.

Das wäre bei mir die Variable $differenz aus obigen PHP-code.

PHP:

$differenz = $ZeitEndeAktion - $timestamp2;

Egal wie unregelmässig die Funktion aufgerufen wird, es wird immer mit der echt vergangenen Zeit hantiert(ich nehme an, darum geht es dir).

Das Script wird immer aufgerufen solange die Aktion in der Datenbank steht, die Zeit nicht abgelaufen ist, der User irgendein Link der Navigation anklickt. Ist die Zeit um wird die Aktion in Tabelle Ereigniss gespeichert und die Aktion gelöscht.

Normal sieht der User also immer die Zeit und nur bei Klick würde das selbe Script (mit aktueller Zeit) wieder aufgerufen werden. Heist normal wird das Script nur einmal aufgerufen kann aber mehrmals aufgerufen werden.

Ohje ich hoffe ihr könnt mir folgen

Das eigentlich Problem ist das Hängenbleiben der Zeit. Es ist unrelevant für weitere Scripte oder weitere Berechnungen (Das Ereigniss läuft ab egal ob der User an der Zeit spielt). Das Problem ist eher das für den User lästige "die Zeit hängt man muss ich schon wieder aktualisieren", "Mist ich dachte die ganze Zeit ich bin unterwegs.. da hätte ich ja längst weitermachen können".

Beachte bei allem: nichts, was im Browser abläuft, ist vertrauenswürdig, User können alles manipulieren(z.B. einfach die PC-Uhr umstellen, wodurch sich die Clientzeit ändert).

Eine wirklich unschöne Sache, ABER Gott sei dank kein Problem bei mir. Der User täte sich nur selbst verarschen. Wenn der User die Zeit verkürzt (durch Win-Uhr verstellen) läuft die Zeit ab-> Script timer.tpl wird immer abgefragt -> Aktion läuft noch -> Script unterwegs.tpl wird wieder aufgerufen.
Der Countdown würde also mit der richtigen Zeit weiterlaufen.

Nun wenn man also mit der WinUhr verstellen kann dann spielt hier durchaus irgendwo die WIN-API eine Rolle. Irgendwas lässt meinen Countdown immer mal stoppen. Alle Scripte inkl. meines Eingangspostes funktionierten aber hatten das "Hängen"-Problem. Sogar auf einen 2.en PC.

wollmaus · 9. November 2011

Wenn irgendetwas deinen Countdown stoppen lässt, und du sicher bist, daß du keine Skriptfehler irgendwo versteckt hast, dann musst du schlicht damit leben.

Dies mag dann eine Eigenheit deines OS oder Browsers sein, dass bei Inaktivität die Prozesspriorität herabgestuft wird oder dergleichen, im FF gibt es z.B. eine gesonderte Mindesteinstellung für Timeouts in inaktiven Tabs(allerdings ist dort der Standard 1000ms, daran kann es also nicht liegen, sofern du daran nicht herumgefummelt hast).

Kannst ja trotzdem mal nachgucken, der Name der Config wäre dom.min_background_timeout_value , der Wert sollte bei 1000 stehen.

Joe · 9. November 2011

Ja sieht wohl so aus

Der Wert ist übrigens auf 1000 wie zu erwarten.. hab da eh nie dran rumgefummelt.

Naja als ich deine neue Funktion heute implementiert hab dachte ich es nochmal gesehen zu haben. Jedenfalls ist es mir trotz versuche jetzt nicht nochmal aufgefallen. Ich nehm stark an das es irgendwas beim OS ist ein Prog im Hintergrund oder sonstwas. Gerade beim Schreiben dieses Textes fiel mir auf das beim Überlegen (was ich hier grad Schreibe) der Curser stehenblieb und verschwand.
Klingt komisch ist aber so. Ist das selbe wie oben beschrieben mit der Maus ähnlich einem Screensaver. Das hat definitiv was mit dem OS zu tun an den Browser glaub ich da garnicht mehr.

Ich denke mal dieses Prob kann man so nicht beheben also mit Script, bleibt nix übrig als das hinzunehmen .. wäre ja ohnehin in meinen Fall nur ein Userbility-Prob. Dennoch schon seltsam ..

Danke euch für die Hilfe

Joe · 10. November 2011

Hey Leute,
ich glaub ich weiss was den Fehler hervorruft. Anscheinend hat das etwas mit dem Focus zu tun. Nach was weiss ich was wievielen Skeunden bis Minuten kann es passieren das FF den Focus verlässt und so scheinbar den Javascriptcode nicht mehr ausführt. Die Zeit bleibt stehen.
Mit dem Code von Wollmaus macht er bei einer Mausbewegung jedoch mit der richtigen Zeit weiter. Ich habe versucht nun ein OnBlur Event einzubauen das falls der Focus verloren geht er direckt wieder gesetzt wird. Besser wäre es den Focus halt immerwährend neu zu setzen.
Auch will ich jetzt keine blinkenden Cursor auf der Site sondern der Focus sollte irgendwo auf ein Element oder Bild weissen.

Tja also ich habe das mal so versucht da mir aber grundlegendes Wissen zu JS fehlt, wollte ich euch fragen ob das so geht wie ich dies hier gemacht habe oder das ganz und gar Quark ist.

HTML:

<p>Du bist noch <b><span id="countdown">0</span></b> min unterwegs.</p>
 
<script  type="text/javascript">
(
  function(duration,node,action,delay)
  {
    var end     = new Date(new Date().getTime()+(duration*1000)).getTime(),
        format  = function(i)
                  {
                    return((i<10)?'0'+i:i);
                  },
        run     = function()
                  {                      
                    var now=new Date().getTime(),
                        diff=Math.floor((end-now)/1000),
                        hh=Math.floor(diff/3600),
                        mm=Math.floor((diff-(hh*3600))/60),
                        ss=diff%60;
                        
                        node.innerHTML  =
                        top.document.title  =
                        [hh,format(mm),format(ss)].join(':');
                        
                        if(diff<1)
                        {
                          action();
                          return;
                        }
                        setTimeout(run,delay);
                    }
    run(); 
  }
)(<?php echo $differenz = $ZeitEndeAktion - $timestamp2;?>, //Laufzeit in Sekunden
  document.getElementById('countdown'), //Zielelement
  function(){location.href='main.php?section=erkunden';}, //finale Funktion
  1000  //Intervall in Millisekunden
  )
  function setFocus() {
    window.setTimeout("countdown.focus()", 0);
}
</script>

HTML:

  function setFocus() {
    window.setTimeout("countdown.focus()", 0);
}

Vielen dank fürs lesen bzw helfen.

Joe · 11. November 2011

Ok das mit dem Focus geben scheint nicht wie gewollt zu klappen und wird verworfen unter Unsinn

Aber ich habe nach ewigen googeln endlich etwas gefunden mich wundert das dies fast im gesamten Netz niemanden auffällt wo doch die setTimeout Funktion sicher sehr oft genutzt wird.

Hier wird genau mein Problem angesprochen. Und ich bin richtig erleichtert das ich nicht der einzige bin der dieses Problem hat.

Well, I did this, and found that the loop would self-cancel, randomly, in Firefox. But how can this be? I haven’t called do_loop(true) manually, so is some kind of cancel argument getting passed into do_loop()? But how, and why? After all, I’d never consider passing additional arguments into a setTimeout callback, because IE doesn’t treat those arguments consistently. Well, it turns out, Firefox isn’t consistent either.

self-cancel,randomly, in Firefox - selbstabrechend, zufällig im Firefox.

Tja also teste ich nun die seiner Meinung nach unschöne Lösung

HTML:

setTimeout( function(){ do_loop(); }, delay );

So richtig vertsnaden, was nun das Problem ist, habe ich zwar nicht aber ich teste es mal aus und poste hier das Ergebniss.

Das Script nochmal als ganzes:

HTML:

	<div id="content-pic">
	<?php include 'templates/Ress.tpl'; ?>
	</div>
	<div id="upper-pic">
	<h2>Pics:</h2>
	</div>
	<div id="uppercontent">
	<h2>Text:</h2>
	</div>
<div id=content>
<h1>Erkundung</h1>
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1); 
$getAktionen = "SELECT
					Username,
					Aktion,
					ZeitEnde
				FROM
					Aktion
				WHERE
					Username='$Username' AND Aktion='Erkunden'";
	$Aktionen = mysql_query($getAktionen);
	if (!$Aktionen) {
		die ('Etwas stimmte mit dem Query nicht: '.$db->error);
	}
	if (mysql_num_rows($Aktionen) != 0) {
		$rowAktionen = mysql_fetch_assoc($Aktionen);
		$ZeitEndeAktion=$rowAktionen["ZeitEnde"];
		$timestamp2 = time();
	}
?>

	


<p>Du bist noch <b><span id="countdown">0</span></b> min unterwegs.</p>
 
<script  type="text/javascript">
(
  function(duration,node,action,delay)
  <!-- Code by Wollmaus @ www.tutorials.de -->
  {
    var end     = new Date(new Date().getTime()+(duration*1000)).getTime(),
        format  = function(i)
                  {
                    return((i<10)?'0'+i:i);
                  },
        run     = function()
                  {                      
                    var now=new Date().getTime(),
                        diff=Math.floor((end-now)/1000),
                        hh=Math.floor(diff/3600),
                        mm=Math.floor((diff-(hh*3600))/60),
                        ss=diff%60;
                        
                        node.innerHTML  =
                        top.document.title  =
                        [hh,format(mm),format(ss)].join(':');
                        
                        if(diff<1)
                        {
                          action();
                          return;
                        }
                        //setTimeout(run,delay);
						setTimeout(function(){run();},delay);
                    }
    run(); 
  }
)
(<?php echo $differenz = $ZeitEndeAktion - $timestamp2;?>, //Laufzeit in Sekunden
  document.getElementById('countdown'), //Zielelement
  function(){location.href='main.php?section=erkunden';}, //finale Funktion
  1000  //Intervall in Millisekunden
  
)
</script>
</body></html>
</div>

Edit hier noch ein Link das Problem scheint sich zu bestätigen: http://www.npac795.org/wk/javascript-settimeout-on-firefox.html

✔ Html Titel Zeit anzeigen

Joe

Erfahrenes Mitglied

javaDeveloper2011

Erfahrenes Mitglied

Joe

Erfahrenes Mitglied

javaDeveloper2011

Erfahrenes Mitglied

wollmaus

Erfahrenes Mitglied

Joe

Erfahrenes Mitglied

wollmaus

Erfahrenes Mitglied

Joe

Erfahrenes Mitglied

Joe

Erfahrenes Mitglied

Joe

Erfahrenes Mitglied

Neue Beiträge