JavaScript Eieruhr mit Buttons zur Zeitsteuerung

Snooty · 20. April 2017

Hio,

ich suche ein Script für einen Countdown (Eieruhr) bei dem ich über Buttons die Zeit ändern kann, also bspw. +1s, +10s, -1s, -10s, Start, Stop.

Ich habe FlipClockJS gefunden; dort gibt es ein Beispiel für eine Uhr mit Start & Stop und einen Zähler mit +1, -1. Das lässt sich aber wohl nicht so ohne Weiteres kombinieren. Bspw. erhalte ich bei der Uhr beim increment immer den Fehler clock.increment is not a function ....

Das hier wäre das Beispiel-Script countdown-start-callback mit dem Versuch einen +1-Button einzubauen:

PHP:

<html>
  <head>
    <link rel="stylesheet" href="../compiled/flipclock.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script src="../compiled/flipclock.js"></script>
  </head>
  <body>
  <div class="clock" style="margin:2em;"></div>
  <div class="message"></div>

  <button class="start">Start Clock</button>
  <button type="button" class="increment" style="margin: 25px; font-size: 20px; padding: 15px;">+1</button>


  <script type="text/javascript">
    var clock;

    $(document).ready(function() {

      clock = $('.clock').FlipClock(10, {
            clockFace: 'MinuteCounter',
            countdown: true,
            autoStart: false,
            callbacks: {
              start: function() {
                $('.message').html('The clock has started!');
              }
            }
        });

        $('.start').click(function(e) {

          clock.start();
        });


//------------increment-aus-simple-counter---------------------

        // Attach a click event to a button a increment the clock
        $('.increment').click(function() {
          //clock.setValue(10);

          // Or you could decrease the clock
          // clock.decrement();

          clock.increment();

          // Or set it to a specific value
          // clock.setValue(x);
        });

//------------increment-aus-simple-counter---------------------

    });
  </script>

  </body>
</html>

Vielleicht weiß jemand, wie man das kombinieren kann - oder kennt jemand ein anderes Script mit den gewünschten Funktionen? Ich brauche dabei mehrere unabhängige Uhren auf einer Seite.

Spike S. · 20. April 2017

Die increment-Funktion gibt es auch nicht an dem Objekt. Beim überfliegen der Doku ist diese auch nicht zu finden.
Du kannst aber mit diesen Funktionen Sekunden hinzufügen oder abziehen:

Code:

clock.time.addSecond();
clock.time.addSeconds(123);
clock.time.subSecond();
clock.time.subSeconds(123);

FlipClock API

Edit: increment gefunden, hängt an der Face-Klasse. Macht also nicht das was du erwartet hast.

Snooty · 20. April 2017

Danke soweit; so einfach ist es dann aber doch nicht. Die Uhr wird hierbei nicht automatisch aktualisiert, man sieht bspw. +1s erst, wenn man Start drückt (Uhr steht auf 10s, Klick auf +1s, augenscheinlich tut sich nichts, Klick auf Start, die Uhr wechselt zu 11s und läuft dann runter).

Und grundsätzlich lässt sich die Uhr nicht mehr wirklich korrekt starten und stoppen, wenn man Sekunden hinzufügt o.ä. ...

Da muss ich mal noch weiter suchen.

r15ch13 · 20. April 2017

Wie waere es mit clock.setTime() und clock.getTime()? Quasi: clock.setTime(clock.getTime().getTimeSeconds() + 10)
oder wie Spike S. schrieb und danach clock.flip(true) ausfuehren.

Spike S. · 20. April 2017

Diese Klasse ist, für mich, nicht wirklich intuitiv. Ein flip() nach einem clock.time.addSecond() funktioniert nur 1 mal (im FF 45.9). Über getTime() und setTime() passieren nur komische Sachen, das flip() funktioniert dabei jedoch. Z.B. scheint es so zu funktionieren, aber warum auch immer man 3 Sekunden für 1 mehr in der Anzeige hinzufügen muss...

Code:

// Attach a click event to a button a increment the clock
		$('.increment').click(function() {
		  //clock.setValue(10);
 
		  // Or you could decrease the clock
		  // clock.decrement();
		  var tmpTime = new FlipClock.Time(new FlipClock.Factory(),clock.getTime().time+3);
		  clock.setTime(tmpTime);
		  clock.flip(true);
 
		  // Or set it to a specific value
		  // clock.setValue(x);
		});

Folgendes führt bei mir zum Fehler "too much recursion":

Code:

// Attach a click event to a button a increment the clock
		$('.increment').click(function() {
		  //clock.setValue(10);
 
		  // Or you could decrease the clock
		  // clock.decrement();
		  var tmpTime = clock.getTime();
                  tmpTime.time.addSecond();
		  clock.setTime(tmpTime);
		  clock.flip(true);
 
		  // Or set it to a specific value
		  // clock.setValue(x);
		});

r15ch13 · 20. April 2017

Das man mehr Sekunden hinzufuegen muss als man eigentlich will habe ich auch eben festgestellt.
Die meisten Funktionen holen sich die Sekunden bei getTimeSeconds() ab und geht irgendwie immer eine Sekunde beim umrechnen verloren.

Edit: Wenn man flip() ausfuehrt wird eine Sekunde abgezogen!

Spike S. · 20. April 2017

Beim ersten flip() wird gar nix abgezogen?!?
Wenn man nach dem initialisieren erst mal einen "trockenen" flip() macht, gehts nachher mit dem hinzufügen und abziehen von Anfang an...
So scheint es für den einfachen Fall zu gehen:

Code:

<script type="text/javascript">
 
	$(document).ready(function() {
	var clock;
 
	  clock = $('.clock').FlipClock(10, {
			clockFace: 'MinuteCounter',
			countdown: true,
			autoStart: false,
			callbacks: {
			  start: function() {
				$('.message').html('The clock has started!');
			  },
			  stop: function() {
				$('.message').html('The clock was stopped!');
			  }
			}
		});
 
		$('.start').click(function(e) {
		  clock.start();
		});
		$('.stop').click(function(e) {
		  clock.stop();
		});

		clock.flip();
 
//------------increment-aus-simple-counter---------------------
 
		// Attach a click event to a button a increment the clock
		$('.increment').click(function() {
		  clock.time.addSeconds(2); // 2 hinzu, da flip() eine abzieht...
		  clock.flip(true);
		});
		$('.decrement').click(function() {
		  clock.flip(true);
		});
 
//------------increment-aus-simple-counter---------------------
 
	});
  </script>

Snooty · 20. April 2017

Oh super, das läuft schon mal wie gewünscht, vielen Dank

r15ch13 · 20. April 2017

Habe sogar einen Fehler gefunden. Wenn man clock.stop() ausfuehrt, dann bleibt die CSS Klasse 'play' an den Ziffern. Will man nun ohne die Animation die Zeit aendern will, geht das nicht mehr

Reproduzierbar durch: Start, kurz warten, Stop, Zeit aendern. Animation wird jetzt immer ausgefuehrt.

Workaround: Im stop-Callback einfach clock.$el.removeClass(clock.time.factory.classes.play); ausfuehren.

Oder Fehler selbst beheben in der stop() Funktion
flipclock.js:871 oder factory.js:315 (pull request #315)

Code:

for(var x in this.lists) {
	if (this.lists.hasOwnProperty(x)) {
		this.lists[x].stop();
	}
}

// Ersetzen durch
for(var x in this.face.lists) {
	if (this.face.lists.hasOwnProperty(x)) {
		this.face.lists[x].stop();
	}
}

Meine Variante mit einer eigenen Variable um die Sekunden zu verwalten.

Code:

<html>
  <head>
    <link rel="stylesheet" href="FlipClock/compiled/flipclock.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script src="FlipClock/compiled/flipclock.js"></script>
  </head>
  <body>
  <div class="clock" style="margin:2em;"></div>
  <div class="message"></div>

  <button class="start" style="margin: 25px; font-size: 20px; padding: 15px;">Start Clock</button>
  <button class="stop" style="margin: 25px; font-size: 20px; padding: 15px;">Stop Clock</button>
  <button type="button" class="increment10" style="margin: 25px; font-size: 20px; padding: 15px;">+10</button>
  <button type="button" class="increment" style="margin: 25px; font-size: 20px; padding: 15px;">+1</button>
  <button type="button" class="decrement" style="margin: 25px; font-size: 20px; padding: 15px;">-1</button>
  <button type="button" class="decrement10" style="margin: 25px; font-size: 20px; padding: 15px;">-10</button>


  <script type="text/javascript">
    var clock;
    var seconds = 10;

    $(document).ready(function() {

      clock = $('.clock').FlipClock(seconds, {
        clockFace: 'MinuteCounter',
        countdown: true,
        autoStart: false,
        callbacks: {
          start: function() {
            $('.message').html('The clock has started!');
          },
          stop: function() {
            // get time left and update local seconds variable
            seconds = clock.getTime().time + 1;

            // workaround for animation bug, after stopping the time
            clock.$el.removeClass(clock.time.factory.classes.play);
            $('.message').html('The clock has stopped!');
          }
        }
      });

      $('.start').click(function(e) {
        clock.start();
      });
      $('.stop').click(function(e) {
        clock.stop();
      });

//------------increment-aus-simple-counter---------------------

      // Attach a click event to a button a increment the clock
      $('.increment').click(function() {
        seconds++;
        clock.setTime(seconds);
      });

      $('.increment10').click(function() {
        seconds += 10;
        clock.setTime(seconds);
      });

//------------increment-aus-simple-counter---------------------

      // Attach a click event to a button a increment the clock
      $('.decrement').click(function() {
        if(seconds - 1 >= 0) {
          seconds--;
          clock.setTime(seconds);
        }
      });

      $('.decrement10').click(function() {
        if(seconds - 10 >= 0) {
          seconds -= 10;
          clock.setTime(seconds);
        }
      });
    });
  </script>

  </body>
</html>

Snooty · 20. April 2017

Perfekt

edit:

Mit dem Reset-Button gibt es wohl auch Probleme; da braucht es auch nochmal ein Flip und 1 Sekunde addieren, damit es korrekt angezeigt wird.

r15ch13 · 20. April 2017

Wenn du setTime() verwendest, dann macht er von selbst einen Flip

Also seconds auf 10 zuruecksetzen und setTime(seconds) sollte hinhauen.

Snooty · 20. April 2017

Danke, teste ich dann.

Suche

JavaScript Eieruhr mit Buttons zur Zeitsteuerung

Snooty

Commodore

Spike S.

Lt. Commander

Snooty

Commodore

r15ch13

Lieutenant

Spike S.

Lt. Commander

r15ch13

Lieutenant

Spike S.

Lt. Commander

Snooty

Commodore

r15ch13

Lieutenant

Snooty

Commodore

r15ch13

Lieutenant

Snooty

Commodore

Ähnliche Themen