[Erledigt] Besuchsdauer anzeigen und anhalten - php.de

X

Ich2015Ich hat ein Thema erstellt [Erledigt] Besuchsdauer anzeigen und anhalten.

22.06.2014, 12:52
[Erledigt] Besuchsdauer anzeigen und anhalten
Moin moin,
ich habe im Internet nach einem fertigen Skript gesucht, das beim Aufruf der Seite anfängt hochzuzählen und somit in Stunden, Minuten und Sekunden die "Besuchsdauer" auf der Seite anzuzeigen.

Dazu kommt erstmal folgendes in den body:

Code:

<body onload="window.setInterval('dauer()',1000)">

und beim Seitenaufruf wird der "Timestamp" (Wenn man das bei JavaScript so nennt, ich habe bisher was die Zeitfunktionen etc angeht nur mit PHP gearbeitet) in eine Variable gespeichert:

Code:

eintritt = new Date();

Die Funktion dauer() sieht so aus:

Code:

function dauer() { jetzt = new Date(); b = new Date(jetzt-eintritt); c = (b.getHours()-1)+''; if(c.length == 1){c = '0'+c;} d = (b.getMinutes())+''; if(d.length == 1){d = '0'+d;} e = (b.getSeconds())+''; if(e.length == 1){e = '0'+e;} zeit = c+':'+d+':'+e; document.getElementById('timer').innerHTML = zeit; }

Was das Ganze macht ist mir schon klar, und zwar wird die Funktion in einem Intervall von 1 Sekunden aufgerufen und diese ermittelt den zeitlichen Abstand zwischen des Timestamps, der beim Aufruf der Seite gespeichert wurde und dem des aktuellen Timestamps (sprich dem, der beim Aufruf der Funktion ermittelt wird).
Das Ganze wird dann als Stunden, Minuten und Sekunden in meinem <span> mit der id="timer" angezeigt.

Was ich jetzt aber brauche sind zwei Dinge:
- Einmal möchte ich, dass der Timer erst nach einem bestimmten Ereignis anfängt
- und zum Anderen möchte ich, dass man die Möglichkeit hat den Timer beliebig anzuhalten und wieder fortzusetzen.

Bei letzterem habe ich gar keine Ahnung wie ich das lösen soll und bei ersterem habe ich das im Moment so "gelöst", dass ich beim Aufruf der Seite die Variable "eintritt" auf irgendwas setze, also z.B.

Code:

eintritt = "irgendwas";

Und wenn jetzt mein Ereignis stattfindet, setzt diese Funktion die Variable eintritt erst auf den Timestamp, so fängt der Counter auch erst dann an zu zählen - so lange wird die ganze Zeit zwar "NaN" oder sowas angezeigt (mehrfach hintereinander), aber das ist nicht schlimm, weil der div in dem das angezeigt wird sowieso so lange bis das Ereignis eintritt verdeckt bleibt.

Mir ist allerdings klar, dass das eine recht unschöne Lösung ist, darum hoffe ich auch diesbezüglich auf Tips von euch, wobei mir aber erstmal wichtiger ist, dass man den Timer pausieren und wieder laufenlassen kann (wenn ich das weiss, würde es ja auch reichen den Timer beim Seitenaufruf direkt zu pausieren, somit würde das auch das andere Problem mit lösen, denk ich mal...)

Ich hoffe dann mal, dass ihr mir dabei helfen könnt und
mfG.
Stichworte: -
Ich2015Ich antwortet

26.06.2014, 14:50
Es ist sicher nicht die optimalste Lösung aber ich habe jetzt einfach eine Funktion gemacht die nach einem Time-out von 1000 Millisekunden aufgerufen wird und - sofern pause==false - immer auf die Variable sekunden einen dazu zählt. Dann wird geprüft ob die Sekunden == 60 sind, wenn ja wird Sekunden wieder auf 0 gesetzt und bei Minuten einen draufgepackt. Dasselbe dann nochmal für Stunden. Das ist zwar noch nicht alles, ich habe noch einen Maximalwert eingebaut und natürlich auch berücksichtigt, dass wenn sekunden, minuten und/oder stunden<10, dann jeweils eine 0 mit davor angezeigt wird.

Wahrscheinlich ist das jetzt nicht die Beste Lösung, aber anders habe ich das nicht hinbekommen, dass die Pause berücksichtigt wird und für meine Zwecke reicht das glaube ich auch erst einmal (es scheint ja zu funktionieren)...
Wenn jetzt hier irgendwer meint rumheulen zu müssen von wegen das sei absolut scheiße gelöst, dann soll er mir gefälligst zeigen wie er es besser lösen würde^^
Einen Kommentar schreiben:
rudygotya antwortet

24.06.2014, 20:37
Für einfacheres Date-Handling: http://momentjs.com/
Einen Kommentar schreiben:
Ich2015Ich antwortet

24.06.2014, 15:52
Zitat von moma Beitrag anzeigen

ich hab gedacht du machst da einen neuen scope auf, keine ahnung wie du das realisierst.
bei mir gäbs ja schon errors, wenn ich nicht mit

Code:

var eintritt = new Date();

anfage.

scheinen mir 23 sekunden zu sein, aber debuggen musste wohl mal selbst.

ja also wenn dieser "Timestamp" bedeutet dass es 23 Sekunden sind ist alles gut...

Aber warum kann mir denn jetzt keiner helfen? wollt ihr nur nicht oder was ist das problem?
Einen Kommentar schreiben:
Ein Gast antwortete

24.06.2014, 15:40
Und wenn ich nun die Pause beende, also auf "Fortsetzen" klicke, wird folgendes getan:

ich hab gedacht du machst da einen neuen scope auf, keine ahnung wie du das realisierst.
bei mir gäbs ja schon errors, wenn ich nicht mit

Code:

var eintritt = new Date();

anfage.

Thu Jan 01 1970 01:00:23 GMT+0100 (Mitteleuropäische Zeit)

scheinen mir 23 sekunden zu sein, aber debuggen musste wohl mal selbst.
Einen Kommentar schreiben:
Ich2015Ich antwortet

24.06.2014, 14:51
Zitat von moma Beitrag anzeigen

was dein code auch immer machen soll:

Code:

eintritt= new Date(eintritt+pauseDuration); console.log(eintritt);

sind die einzigen zueilen welche ich auf die schnelle finde wo eintritt vorkommt, und eintritt macht Dir ja sorgen. mich wundert das nicht.

Dann gucks dir nochmal genau an:

Code:

eintritt = new Date(); window.setTimeout('dauer()',1000);
Einen Kommentar schreiben:
Ein Gast antwortete

24.06.2014, 08:18
was dein code auch immer machen soll:

Code:

eintritt= new Date(eintritt+pauseDuration); console.log(eintritt);

sind die einzigen zueilen welche ich auf die schnelle finde wo eintritt vorkommt, und eintritt macht Dir ja sorgen. mich wundert das nicht.
Einen Kommentar schreiben:
Ich2015Ich antwortet

23.06.2014, 18:42
Zitat von nikosch Beitrag anzeigen

Dann zieh Dir halt den relevanten Befehl raus. Oder hast Du den Ausgangscode auch nur zusammenkopiert?

Was meinst du? Welchen relevanten Befehl?

Ich hab das Ganze übrigends mal etwas verändert:
ich habe das "onLoad" aus dem body rausgenommen und auch die initialisierung der variable "eintritt" auf "irgendwas" habe ich rausgenommen.
Nun setzte ich bei dem Ereignis, ab wo der Counter anfangen soll zu zählen, einfach "eintritt" auf die aktuelle Zeit und einen Timeout auf 1000:

Code:

eintritt = new Date(); window.setTimeout('dauer()',1000);

Und damit der Timeout auch fortgeführt wird, setze ich den Timeout in der Funktion immer wieder auf 1000 Millisekunden:

Code:

function dauer() { jetzt = new Date(); b = new Date(jetzt-eintritt); c = (b.getHours()-1)+''; if(c.length == 1){c = '0'+c;} d = (b.getMinutes())+''; if(d.length == 1){d = '0'+d;} e = (b.getSeconds())+''; if(e.length == 1){e = '0'+e;} zeit = c+':'+d+':'+e; document.getElementById('timer').innerHTML = zeit; window.setTimeout('dauer()',1000); }

So weit so gut, das scheint so erstmal zu funktionieren.
Jetzt habe ich die Idee gehabt, dass ich einfach auch nochmal mitzähle, wie lange die pause läuft und die dauer der pause beim beenden der pause, einfach zu dem urspürnglichen Timestamp "eintritt" dazuzähle.
Dadurch wird die Differenz zwischen "eintritt" und "jetzt" ja um die Dauer der Pause verringert und somit komme ich im Endeffekt ja auch auf das Ergebnis was ich haben will.

Das habe ich jetzt so versucht:
Wenn ich den Pause Button betätige wird folgendes ausgeführt:

Code:

pauseStart=new Date(); console.log(pauseStart);

Und wenn ich nun die Pause beende, also auf "Fortsetzen" klicke, wird folgendes getan:

Code:

pauseEnd = new Date(); console.log(pauseEnd); pauseDuration = new Date(pauseEnd-pauseStart); console.log(pauseDuration); eintritt= new Date(eintritt+pauseDuration); console.log(eintritt);

Warum das console.log()? Nunja, weil das was ich da gemacht habe, natürlich nicht funktioniert - wäre ja auch zu schön gewesen.....
Die Konsole zeigt mir also folgendes an:

Code:

Mon Jun 23 2014 20:16:09 GMT+0200 (Mitteleuropäische Sommerzeit) Mon Jun 23 2014 20:16:32 GMT+0200 (Mitteleuropäische Sommerzeit) Thu Jan 01 1970 01:00:23 GMT+0100 (Mitteleuropäische Zeit) Invalid Date

Tja, das kann ich so nicht ganz nachvollziehen.... Es fängt ja in dem Moment an, wo ich die Dauer der Pause berechnen möchte, da gibt er ja schon nen komischen Timestamp aus, das ist ganz bestimmt nicht die differenz die er da anzeigt...

Ich hoffe dass ihr mir da nun weiterhelfen könnt....
Einen Kommentar schreiben:
nikosch antwortet

23.06.2014, 09:20
Dann zieh Dir halt den relevanten Befehl raus. Oder hast Du den Ausgangscode auch nur zusammenkopiert?
Einen Kommentar schreiben:
Ich2015Ich antwortet

22.06.2014, 22:58
Zitat von Günni Beitrag anzeigen

Hi Ich2015Ich,

du kannst den Timer beim Seitenaufruf pausieren lassen, in dem du die Funktion gar nicht erst aufrufst

Das Starten und Stoppen des Timers passiert dann über zwei Buttons, die einen entspr. Funktionsaufruf vornehmen.

PHP-Code:

<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <script type="text/javascript">  </script> </head> <body> <p><input type="button" value="Start" onclick="start_timer()"></button><input type="button" value="Stop" onclick="stop_timer()"></button></p> <div id = "timer"> </div> </body> </html>

War das so angedacht?

Gruß
Günni

Okay hab mir das jetzt mal angeguckt, aber erstmal zeigt es mir die aktuelle Uhrzeit an und zählt nicht die Verweildauer auf der Seite - das ist ganz klar weil die Funktion einfach bei jedem aufruf die aktuelle zeit ausliest (new Date()...

Außerdem bleibt er auch nur scheinbar stehen - drücke ich auf den knopf zum stoppen, so bleibt zwar die aktuelle uhrzeit in dem container stehen und ist auch angehalten, aber wenn ich wieder auf start drücke, liest er logischerweise wieder die aktuelle uhrzeit aus...
Da ist das was ich vorher hatte schon um einiges besser, weil der wirklich die verweildauer anzeigt, ich bräuchte halt nur was, was das Ganze pausiert und bei bedarf weiterlaufen lässt - und zwar ab dem stand wo es pausiert wurde...

Trotzdem Danke für den Versuch der Hilfe
Einen Kommentar schreiben:
Ich2015Ich antwortet

22.06.2014, 21:31
Zitat von nikosch Beitrag anzeigen

http://zetafleet.com/blog/why-i-cons...terval-harmful

Ein Blick in die Doku muss wahnsinnig schwer sein.

Natürlich, was glaubst du was man dazu alles tun muss

Zitat von Günni Beitrag anzeigen

Hi Ich2015Ich,

du kannst den Timer beim Seitenaufruf pausieren lassen, in dem du die Funktion gar nicht erst aufrufst

Das Starten und Stoppen des Timers passiert dann über zwei Buttons, die einen entspr. Funktionsaufruf vornehmen.

PHP-Code:

<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <script type="text/javascript">  </script> </head> <body> <p><input type="button" value="Start" onclick="start_timer()"></button><input type="button" value="Stop" onclick="stop_timer()"></button></p> <div id = "timer"> </div> </body> </html>

War das so angedacht?

Gruß
Günni

Ich guck mir das gleich mal an, dankeschön
Einen Kommentar schreiben:
alxy antwortet

22.06.2014, 19:12
Nimm doch sowas wie Google Analytics. Habe es zwar noch nie benutzt, aber irgendwie würde ich dem mehr vertrauen als diversen Eigenbauten...
Einen Kommentar schreiben:
nikosch antwortet

22.06.2014, 18:55
http://zetafleet.com/blog/why-i-cons...terval-harmful

Bei letzterem habe ich gar keine Ahnung wie ich das lösen soll

Ein Blick in die Doku muss wahnsinnig schwer sein.
Einen Kommentar schreiben:
Günni antwortet

22.06.2014, 17:46
Hi Ich2015Ich,

du kannst den Timer beim Seitenaufruf pausieren lassen, in dem du die Funktion gar nicht erst aufrufst

Das Starten und Stoppen des Timers passiert dann über zwei Buttons, die einen entspr. Funktionsaufruf vornehmen.

PHP-Code:

<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <script type="text/javascript">  </script> </head> <body> <p><input type="button" value="Start" onclick="start_timer()"></button><input type="button" value="Stop" onclick="stop_timer()"></button></p> <div id = "timer"> </div> </body> </html>

War das so angedacht?

Gruß
Günni
Einen Kommentar schreiben:

Vorherige Weiter

Lädt...

X