Hallo Tutorials,
ich möchte gern als Titelleiste eine Zeitangabe ausgeben welche dynamisch runterzählt.

Habe das hier versucht aber das gibt mir als Titel nur

<span id="countdown">0</span>

Der Code ansich ist in Ordnung ich suche halt nur eine möglichkeit das im Title-Tag darzustellen, so das es mir im Browser als Titel die Zeit zeigt.

HTML-Code:

<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;
lngSekunden--;
if(lngSekunden >= 0) window.setTimeout('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><span id="countdown">0</span></title>

Hi,

Code javascript:

1	document.getElementsByTagName('title')[0].innerHTML = strZeit;

So klappt, das title-Tag solltest du notieren, aber keinen inhalt dazwischen!

Bin nicht mit Javascript vertraut
Es hat daher etwas gedauert zu begreifen das dies in die Funktion gehört.

HTML-Code:

<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.getElementsByTagName('title')[0].innerHTML = strZeit;
lngSekunden--;
if(lngSekunden >= 0) window.setTimeout('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>

Vielen Dank für die schnelle Hilfe genauso wollte ich das
Kann man auch vor der Zeitausgabe ein Text ausgeben?
Etwa sowas: Erkunden: 00:01.30 ?

Natürlich.

Code javascript:

1	... = 'Erkunden: ' + strZeit;

Ganz normale Stringverkettung.

Gruß

Ahja vielen Dank nun weiss ich wie es geht. Obwohl ich grad feststelle das es den Sinn dann verfehlt. Ziel ist es den User die Möglichkeit zu geben während des Countdowns den Tab zu wechseln im Browser und dennoch die Zeit im Auge zu behalten. Aber bei längeren Titel würde dies natürlich nix mehr bringen.

Nichts destotrotz hilft mir diese Stringverkettung in einen andren Script gut weiter daher THX

Hab noch eine Frage zur Funktion und wollte nicht extra ein Thread aufmachen.

Hin und wieder passiert es das der Counter beim runterzählen stehen bleibt. Kann allerdings nicht recht nachvollziehen wieso. Woran kann das liegen und gäbe es Möglichkeiten das "stehenbleiben" zu umgehen oder den Counter zu aktualisieren falls er stehen bleibt?

- kannst du mehr dazu sagen wann das passiert / unter welchen Umständen?
- bleibt er bei bestimmten Werten stehen?
- welche start-werte hast du probiert?
- sind alle Browser betroffen? (oder vielleicht nur alte)
- kennst du Firebug bzw. hast du es damit schon untersucht?

- kannst du mehr dazu sagen wann das passiert / unter welchen Umständen?
Es ist schwer reproduzierbar es fällt nur auf das der Counter stehen bleibt wenn man es sieht.
Aufgefallen ist es mir definitiv als ich den Browser minimierte und irgendwann wieder maximierte.
Ansonsten wie gesagt "scheinbar" willkürlich.

- bleibt er bei bestimmten Werten stehen?
Nein. Die Zeit wann es stehen bleibt ist immer anders. Es bleibt alles stehen (Stunden,Minuten,Sekunden)

- welche start-werte hast du probiert?
Der Startwert ist immer 5min aber da die Zeit irgendwann später abricht also meinetwegen bei 3min45 dürfte es nicht an der Startzeit liegen .. starten tut sie jedoch immer.

- sind alle Browser betroffen? (oder vielleicht nur alte)
Ich nutze meist FF . IE Chrome usw nutze ich nur um Layoutfehler zu finden (Browserkompalität)
Der Fehler existierte aber auch schon in älteren FF-Versionen.

- kennst du Firebug bzw. hast du es damit schon untersucht?
Hab ich zwar installiert allerdings brauchte ich bisher nur um Elemente meiner Seite zu untersuchen.
Soll heissen ich weiss nicht um der Möglichkeiten mit Firebug umzugehen.


Irgendwie vermute ich liegt das Problem clientseitig und nicht serverseitig denn wenn die Variable einmal gesetzt ist ändert sie sich nicht mehr. Keine Ahnung ob die windows-API hier irgendwie ne Rolle spielt oder sowas.

Edit: mir fällt gerade noch ein das der Counter manchmal auch langsamer zählt (zumindest glaube ich das) kann natürlich auch sein das er nur später weiterzählte und es daurch gefühlt langsamer war.

Irgendwie vermute ich liegt das Problem clientseitig und nicht serverseitig denn wenn die Variable einmal gesetzt ist ändert sie sich nicht mehr.

Definitiv. Es liegt an JS, also Clientseitig

Keine Ahnung ob die windows-API hier irgendwie ne Rolle spielt oder sowas.

Die Win-API ist meines Wissens eine Bibliothek für Desktop-Anwendungen und hat mit dm Web wenig bis gar nichts zu tuen.

Das wird komplett fehlschlagen im IE<9, denn im IE hat das title-element keine innerHTML-Eigenschaft.

Stattdessen sollte die title-Eigenschaft des Dokumentes geändert werden.

Code :

1	document.title='foobar';

Weiterhin: du kannst mit an Sicherheit grenzender Wahrscheinlichkeit davon ausgehen, dass wenn du bei deinem timeout eine Zeit von 1000ms angegeben hast, dein Scriptcode nicht genau alle 1000ms ausgeführt wird, das ist abhängig von der Prozessorauslastung des Clientrechners, wie genau das erfolgt. Daher solltest du den timeout zwar bei 1000ms lassen, aber dein Skript mit der aktuellen Clientzeit rechnen lassen anstatt davon auszugehen, dass bei jedem Funktionsaufruf genau 1 Sekunde vergangen ist.

Letztendlich: Auch wenn setTimeout direkt Code als Argument akzeptiert, solltest du davon absehen, denn dieser muss per eval() ausgeführt werden. Stattdessen eine Funktion übergeben, das ist nicht nur sauberer/eleganter, sondern auch ressourcenschonender:

Code :

1 2 3 4 5

window.setTimeout(secondCount, 1000);   //oder   window.setTimeout(function(){secondCount();}, 1000);

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-Code:

<?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>

Hi,

Zeit in Sekunden kann man so hohlen:

Code javascript:

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

doc auf selfHTML

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-Code:

<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>

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?

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 :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<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/