✔ Html Titel Zeit anzeigen

[Joe]

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.

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

 

[javaDeveloper2011]

Hi,

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

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

 

[Joe]

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

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

 

[sheel]

Natürlich.

... = 'Erkunden: ' + strZeit;

Ganz normale Stringverkettung.

Gruß

 

[Joe]

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

 

[Joe]

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?

 

[javaDeveloper2011]

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

 

[Joe]

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

 

[javaDeveloper2011]

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.

 

[wollmaus]

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.

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:

window.setTimeout(secondCount, 1000);

//oder

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