Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Besuchsdauer anzeigen und anhalten

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

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

  • #2
    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">
    <!--
    var 
    aktiv false;

    function 
    start_timer(){
     
    aktiv window.setInterval('dauer()',1000);
    }

    function 
    stop_timer(){
     
    window.clearInterval(aktiv);
    }

    function 
    dauer(){
     
    jetzt = new Date();
     
    = new Date(jetzt);
     
    = (b.getHours()-1)+'';
     if(
    c.length == 1){'0'+c;}
     
    = (b.getMinutes())+'';
     if(
    d.length == 1){'0'+d;}
     
    = (b.getSeconds())+'';
     if(
    e.length == 1){'0'+e;}
     
    zeit c+':'+d+':'+e;
     
    document.getElementById('timer').innerHTML zeit;
    }
    // -->
    </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

    Kommentar


    • #3
      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.
      [COLOR="#F5F5FF"]--[/COLOR]
      [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
      [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
      [COLOR="#F5F5FF"]
      --[/COLOR]

      Kommentar


      • #4
        Nimm doch sowas wie Google Analytics. Habe es zwar noch nie benutzt, aber irgendwie würde ich dem mehr vertrauen als diversen Eigenbauten...

        Kommentar


        • #5
          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">
          <!--
          var 
          aktiv false;

          function 
          start_timer(){
           
          aktiv window.setInterval('dauer()',1000);
          }

          function 
          stop_timer(){
           
          window.clearInterval(aktiv);
          }

          function 
          dauer(){
           
          jetzt = new Date();
           
          = new Date(jetzt);
           
          = (b.getHours()-1)+'';
           if(
          c.length == 1){'0'+c;}
           
          = (b.getMinutes())+'';
           if(
          d.length == 1){'0'+d;}
           
          = (b.getSeconds())+'';
           if(
          e.length == 1){'0'+e;}
           
          zeit c+':'+d+':'+e;
           
          document.getElementById('timer').innerHTML zeit;
          }
          // -->
          </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

          Kommentar


          • #6
            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">
            <!--
            var 
            aktiv false;

            function 
            start_timer(){
             
            aktiv window.setInterval('dauer()',1000);
            }

            function 
            stop_timer(){
             
            window.clearInterval(aktiv);
            }

            function 
            dauer(){
             
            jetzt = new Date();
             
            = new Date(jetzt);
             
            = (b.getHours()-1)+'';
             if(
            c.length == 1){'0'+c;}
             
            = (b.getMinutes())+'';
             if(
            d.length == 1){'0'+d;}
             
            = (b.getSeconds())+'';
             if(
            e.length == 1){'0'+e;}
             
            zeit c+':'+d+':'+e;
             
            document.getElementById('timer').innerHTML zeit;
            }
            // -->
            </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

            Kommentar


            • #7
              Dann zieh Dir halt den relevanten Befehl raus. Oder hast Du den Ausgangscode auch nur zusammenkopiert?
              [COLOR="#F5F5FF"]--[/COLOR]
              [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
              „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
              [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
              [COLOR="#F5F5FF"]
              --[/COLOR]

              Kommentar


              • #8
                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....

                Kommentar


                • #9
                  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.

                  Kommentar


                  • #10
                    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);

                    Kommentar


                    • #11
                      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.

                      Kommentar


                      • #12
                        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?

                        Kommentar


                        • #13
                          Für einfacheres Date-Handling: http://momentjs.com/
                          I like cooking my family and my pets.
                          Use commas. Don't be a psycho.
                          [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                          Kommentar


                          • #14
                            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^^

                            Kommentar

                            Lädt...
                            X