Timer (mitlaufende Uhr) zweistellig anzeigen

  • Servus.

    Ich habe mir einen Timer gebastelt, der bei mit auf der Seite als "Session Dauer" Zähler eingesetzt wird.

    So sieht das ganze in Rohformat aus: .


    Ich bekomme es aber leider nicht gebacken, dass 2 Nullen als Platzhalter anzeigt weden, so dass die Zeit wie folgt ausgegeben wird: 00:01:59 z.B.


    Weiterhin: wäre es auch möglich, dass die Stundenanzeige "x" erst dann erscheint, wenn die Anzeige auf 59:59 (+1) ist?

  • Habs bei mir so gelöst:

    JavaScript
    _h = ( _h<10 ) ? '0' + _h.toString() : _h.toString();
    _m = ( _m<10 ) ? '0' + _m.toString() : _m.toString();


    Die Variante von Sempervivum gefällt mir allerdings vom Ansatz her sehr gut. Dort benötigt man allerdings die length des Strings nicht, substr() kann das mit negativen Zahlen:

    JavaScript
    _h = ('0' + _h).substr( -2 );
    _m = ('0' + _m).substr( -2 );
  • Habe nun deine erste Variante drin. Es wird zwar nun 00:00:0 angezeigt, jedoch springt die Anzeige später auf 00:001:0 und jede Minute wird eine weitere 1 hinzugefügt ( 0:0011:0 )


    Code
    var x=0;
    var y=0;
    var z=50;
    x = ( x<10 ) ? '0' + x.toString() : x.toString();
    y = ( y<10 ) ? '0' + y.toString() : y.toString();
    document.write("<div><span id='timer'>"+x+"</span></div>");
    function surr(){    
    if(z>59){y=y+1;z=0;}    
    if(y>59){x=x+1;y=0;}



    Beispiellink ist noch oben.


    Habe auch den Befehl y= "0" + String(y) ausprobiert. hab das identische Problem.


    Es ist aktuell noch etwas schwer für mich, die Zusammenhänge der Befehle zu verstehen. Darum tue ich mir es teilweise schwer, den richtigen Platz für die Ergänzungen zu finden.


    Hab den Timer nun bei 50 Sekunden, damit man nicht ewig warten muss :)

  • Startet bei 00:00:00 jedoch springt er nach einer Minute auf 00:1:00 und nach 1 Stunde auch 1:0:0


    Btw: meine zweite Frage oben, dass die Stunden erst dann einblenden, wenn sie benötigt werden, hat sich erledigt.
    Habe es wie folgt gelöst:


    Code
    document.getElementById("timer").innerHTML =((x>0)?x+':':'')+y+':'+z;
  • Also der Code sieht aktuell wie folgt aus: und hier die daraus resultierende uhr

    Der Code von Arne ist mit drin. Habe der Einfachheitshalber die Kürzeln X:Y:Z gegen H:M:S geändert.

    Der Timer fängt bei 00:00:0 an, was schon mal gut ist (lediglich die Sekunden müssen noch korrigiert werden)
    Nach einer Minute, springt die Uhr auf 00:1:0, obwohl der Befehl m = (m<10) dort ist. Das dürfte es doch eigentlich nicht machen, denn der Wert ist ja kleiner als verlangt.

    Das gleiche macht er nach einer Stunde auch. Dann haben wir komplett die Ausgangssituation mit 1:0:0.

    Ich habe keine Ahnung, was ich da falsch mache.

  • Die Bedingung ist aber außerhalb der Funktion und wird damit nur beim ersten mal berücksichtigt.

    Ich würde folgendermaßen rangehen:


    1. Definition der Grundlagen:

    HTML
    <div class="timer"></div>
    JavaScript
    var eTimer = document.querySelector( '.timer' );
    var oTimer = { hours : 0, minutes : 0, seconds : 0 };


    2. Timer-Aktualisierung verarbeiten:

    Jetzt wird in jedem Durchlauf die Formatierung neu gesetzt und alles sollte so sein, wie Du es wünschst...

  • Ersten führen ja viele Wege nach Rom.

    Du siehst ja an deinen und an den von Arne Drews und Sempervivum das es jeder etwas anders macht.

    Bevor ich jetzt hier auch mit anfange rum zu stückeln zeige ich dir mal mein Weg .

    Vieleicht kannst du dann sehen was du noch bei dir ändern müßtest damit er läuft


    Nur du solltest versuchen deinen eigenen Weg zu finden ,weil du siehst ja alle hier gezeigten Varianten führen ans Ziel wenn man weiß wie es geht.

    Hat das eigentlich ein Grund warum du document.write verwendest. Normalerweise sollte man darauf verzichten



    EDIT: Arne wahr schneller

  • vielen Dank für eure Mühen.

    das werde ich später in Angriff nehmen und berichten

    Hat das eigentlich ein Grund warum du document.write verwendest.


    Ich habe das Grundgerüst des Codes von (ich glaub) selfhtml geholt und darin meine Änderungen gemacht.
    Werde mich aber später mal einlesen, was dieses document.write ist und ob das nötig ist.


  • Ich danke euch beiden. Habt mir sehr sehr geholfen. Habe meinen Timer nun endlich so, wie ich es mir vorgestellt habe.

    Kleine Korrektur möchte ich noch hinzufügen, falls einer über diesen Thread stolpern sollte...


    if(x>59){alert('Juhu you are 60 minutes on my Website')}

    Dieser Alert ist auf X, also Stunden bezogen. Für die Minuten muss es dann Y heissen.
    Und >59 würde hier auch nicht funktionieren, da der Wert sich danach auf 0 ändert und somit die Zahl nie höher als 59 gehen kann.
    Man kann alternativ zwar if (y>58){alert('Juhu you are 60 minutes on my Website')} eintippen, jedoch erscheint die Meldung 1 Minute lang im Sekundentakt, wenn man den Alert schließt.

    Die Zeile hab ich bei mir nun auskommentiert bzw. entfernt.

    Danke euch nochmal...

  • Man arbeitet auch nicht mit alert() im Produktivbetrieb. Nutze Ausgabe-Container für Meldungen.


    Noch kurz ne persönliche Meinung: Ändere Dein Verhalten im Umgang mit Variablenbezeichnern.

    Nicht nur dass x und y absolut nichts sagend sind, es hat noch nicht mal was mit den Werten darin zu tun.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!