• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Button Countdown anhalten

J

jupiter1

New member
Hallo zusammen,

ich bastel gerade an einem Button mit Countdown, welcher erst nach ablauf von 10 Sekunden aktiviert wird.
Die verbleibende Zeit steht dabei im Button drin. Das klappt auch soweit.

Nun möchte ich jedoch diesen Countdown anhalten, wenn die Maus einen gewissen Bereich verlässt
(DIV Bereich) und erst weiterlaufen lassen, wenn die Maus wieder in diesem Bereich ist.

Ich habe mir dazu schon folgendes gefunden:
  • onmouseout="pause()"
  • onmouseover="fortsetzen()"

Ich bastel an pause und fortsetzen nun schon ziemlich lange rum und bekomme es aber nicht hin
und hoffe nun, dass ihr mir da weiterhelfen könnt.


MfG jupiter1
 
Ich mache am Anfang var pause = 0; und setze pause dann beim Verlassen auf 1 und beim Betreten auf 0.
Beim Runterzählen guck ich dann, ob die Pause gesetzt ist oder nicht. Hat aber nicht ganz funktioniert.
Den Code habe ich leider nicht mehr.
 
Dieser Ansatz ist komplett ungeeignet für deine Problemstellung, da alle Aktualisierungen auf einmal registriert werden und dann einfach durchlaufen, wobei du keinerlei Kontrolle mehr darüber hast.

Du musst im onmouseover mit window.clearTimeout() deinen Timeout stoppen und dann im onmouseout wieder starten, wobei du dir natürlich irgendwo merken musst, bei welcher Zahl du gerade stehst. Aber seht genau ist das dann nicht. Wenn es genau sein muss, musst du mit Hilfe des Date-Konstruktors die genau vergangene Zeit messen.

PS: window.setTimeout sollte man als Parameter keinen String übergeben.
 
Ich habe jetzt nochmal einiges versucht wie du gesagt hast und es klappt nicht. Hast du zufällig ein Codebeispiel dazu?
 
Wirklich ungenau könnte man das in etwa so machen:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<button id="countDown">weiter</button>
<div id="pause">Pause</div>
<script type="text/javascript">
(function(){
	var button = document.getElementById("countDown");
	button.disabled = true;
	
	var remaining = 6;
	var timeout = false;
	function tick(){
		remaining -= 1;
		if (remaining === 0){
			button.disabled = false;
			button.innerHTML = "weiter";
		}
		else {
			button.innerHTML = "weiter in " + remaining + " Sekunden";
			timeout = window.setTimeout(tick, 1000);
		}
	}
	tick();
	
	var pause = document.getElementById("pause");
	pause.onmouseover = function(){
		window.clearTimeout(timeout);
		button.innerHTML += " (Pause)";
	};
	pause.onmouseout = function(){
		remaining += 1;
		tick();
	}
	
}());
</script>
</body>
</html>
- auch nicht wirklich elegant...

Ich würde das aber so nicht machen, sondern sauber: http://kkjs.kkapsner.de/modules/kkjs.Timer.js
 
Danke. Doch wie anfangs erwähnt wollte ich den Countdown pausieren, wenn der DIV mit der Maus verlassen wurde, nicht, wenn die Maus im DIV ist.
Ich habe schon versucht, dein Beispiel umzustellen, indem ich die Aktionen in onmouseover und onmouseout vertauscht habe.
Der Countdown hält nun auch beim Verlassen des DIV an, geht aber nach 1 Sekunde direkt weiter.
Muss man dafür noch was ergänzen oder so?
 
Dann muss die Logik natürlich anders aufgebaut sein, da der Timer nicht gleich am Anfang gestartet werden darf (tick()).

Außerdem ist in dem Code oben noch nicht drin, dass das "(pause)" nicht angezeigt wird, wenn der Timer schon abgelaufen ist.

PS: Ich halte ja nicht besonder viel von deiner kompletten Idee. Du verschwendest damit nur 10 Sekunden Lebenszeit deiner Seitenbesucher. Die können noch nicht einmal in einen anderen Tab wechseln, bis der Timer abgelaufen ist...
 
Ich hab jetzt wieder bis eben versucht, es selber umzubauen, es aber nicht hinbekommen.
Der Countdown soll nur laufen, wenn die Maus im DIV ist.
Damit prüfe ich, ob der Besucher sich den offenen Tab auch wirklich durchliest.

Kannst du mir den Code bitte umstellen?
 
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<button id="countDown">weiter</button>
<div id="pause">Pause</div>
<script type="text/javascript">
(function(){
	var button = document.getElementById("countDown");
	button.disabled = true;
	
	var remaining = 6;
	var timeout = false;
	function tick(){
		remaining -= 1;
		if (remaining === 0){
			button.disabled = false;
			button.innerHTML = "weiter";
		}
		else {
			button.innerHTML = "weiter in " + remaining + " Sekunden";
			timeout = window.setTimeout(tick, 1000);
		}
	}
	
	var pause = document.getElementById("pause");
	pause.onmouseout = function(){
		window.clearTimeout(timeout);
		button.innerHTML += " (Pause)";
	};
	pause.onmouseover = function(){
		remaining += 1;
		tick();
	}
	
}());
</script>
</body>
</html>
- immer noch ziemlich unelegant...

Aber auch damit kannst du nicht überprüfen, ob der Text auch wirklich durchgelesen wurde...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben