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

Verlosung

E

exmachina

New member
Hallo Zusammen,

ich muss eine Verlosung für ca. 250 Leute umsetzen. Dazu habe ich mal im Netz nach Scripts gesucht und folgendes gefunden:
Erst noch zu meiner Frage: Gibt es eine Möglichkeit den Gewinner automatisch aus der Liste zu entfernen? Soweit ich weiß, müsste das irgendwia über jQuery remove() funktionieren. Ich bin nur eine komplette Null was JS u. jQuery angeht.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Auslosung</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!-- jQuery einbinden -->
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
		/* Wenn der Body geladen ist werden die enthaltenen Funktionen ausgeführt.
		$(document).ready(function(){ ... }); Alle in dieser enthaltenen Funktionen werden entsprechd erst bei geladenem Body ausgeführt */
		$(document).ready(function(){
			/* Der Button mit der id #auslosungstarten wird mit einer click Funktion belegt. */
			$('#auslosungstarten').click(function(){
				/* Der Button selbst wird ausgeblendet */
				$(this).hide('slow');
 
				/* Ein Interval wird gestartet und die Funktion auslosung() alle 300 Milisekunden ausgeführt */
				intVal = window.setInterval("auslosung()", 300);
				/* Nach 5 Sekunden wird der Gewinner gezogen */
				window.setTimeout("winneris()", 5000);
				/* return false verhindert, dass der href des Links aufgerufen wird */
				return false;
			});
 
			auslosung = function(){
				/* member enthält die Anzahl der Teilnehmer der Verlosung */
				member = $('.member li').length;
				/* 
				Math.random() generiert eine Zufallszahl.
				Diese mit den Teilnehmern multipliziert ergebit den index Wert eines der Teilnehmer.
				 */
				randNum = Math.floor(Math.random()*member);
				/* Die CSS Klasse "win" wird von allen li's entfernt und ... */
				$('.member li').removeClass('win');
				/* ... für den durch die Zufallszahl gewählten Teilnehmer neu gesetzt */
				$('.member li:eq('+randNum+')').addClass('win');
 
				/* Diese Funktion wiederholt sich alle 300 Milisekunden.
				Dadurch entsteht das Muster, dass immer ein anderer Teilnehmer markiert wird.
				*/
			}
 
			winneris = function(){
				/* Nachdem 30 Sekunden lang zufällige Teilnehmer markiert wurden, wird der Intervall nun beendet */
				clearInterval(intVal);
				/* Der zuletzt markierte Teilnehmer wird nun als Gewinner gezogen */
				winner = $('.member li.win').html();
				/* Der Gewinner wird in der #andthewinneris ausgegeben. */
				$('#andthewinneris').html('Gewonnen hat: <strong>'+winner+'<\/strong>');
			}
		});
		</script>
		<style type="text/css">
		/* Das ist der CSS Code zum Verlosungs-System und bedarf meiner Meinung nach keiner weiteren Erklärung */
		*{outline:none;padding:0px;margin:0px;}
		body{padding:40px;font:14px "Myriad Pro";color:#333;}
		
		h1{margin-bottom:20px;font-size:26px;font-weight:normal;}
 
		.member{list-style:none;width: 100%;}
		.member li{padding:10px;width:160px;background:#efefef;border:1px solid #ddd;margin:0 10px 10px 0;float:left;text-align:center;}
		.member li.win{background:#fff9d7;border:1px solid #e2c822;}
		
		#auslosungstarten{padding:10px;width:160px;background:#f24f04;border:1px solid #c13d00;margin:0 10px 10px 0;float:left;text-align:center;font-weight:bold;text-decoration:none;display:block;color:#fff;margin-top:40px;}
		#andthewinneris{margin-top:40px;font-size:26px;font-weight:normal;color: #f24f04;}
		</style>
	</head>
	<body>
		<h1>Geschenkeverlosung</h1>
		<!-- Dashier ist die Liste der Teilnehmer von der Verlosung -->
		<div style="width:200px; float:left;">
		<ul class="member">
			<li>Daniel</li>
			<li>Karin</li>
			<li>Martin</li>
			<li>Brigitte</li>
			<li>Thomas</li>
			<li>Josip</li>
			<li>Nicole</li>
			<li>Daniela</li>
			<li>Gabi</li>
			<li>Sonja</li>
			<li>Heike</li>
			<li>Benno</li>
			<li>Klaus</li>
		</ul></div><div style="float:right;">
		<!-- Button zum starten der Verlosung -->
		<a href="#" id="auslosungstarten">Auslosung starten...</a>
		<!-- Ausgabe des Gewinners: -->
		<h1 id="andthewinneris"></h1></div><br clear="all" />
	</body>
</html>

Vielen Dank im Voraus.
 
Zuletzt bearbeitet:
Hi,
ja das sollte gehen , wenn du die Position des Gewinners hast !
In dem Beispiel wird ja dem Gewinner eine class "win" hinzugefügt $('.member li:eq('+randNum+')').addClass('win');
an der Stelle kannst du auch den li-Eintrag entfernen lassen.
$("#member li").eq(1).remove();
 
Hmm, also wenn ich nicht völlig daneben liege, dann kann ich doch die Position gar nicht wissen, weil der Gewinner ja zufällig ermittelt wird. Aber ich überlege mir gerade einen anderen Ansatz und zwar den Namen eine zufällige Zahl zwischen 1-250 zu zuteilen. Wäre sowas möglich?
 
Zwei generelle Anmerkungen:
  • setTimeout() sollte man eine Funktionsreferenz, keinen String übergeben: setTimeout(winneris, 5000);
  • ich weiß jetzt nicht genau, wie die Verlosung aussehen soll, aber ich täte dir raten, das Ganze lieber serverseitig zu machen, da die Ergebnisse clientseitig leicht manipuliert werden können
 
Sowas ist gar nicht nötig. Du hast ja in der winneris() direkt die "Gewinner"-Node. Die kannst du dann auch direkt entfernen:
Code: 
			winneris = function(){
				/* Nachdem 30 Sekunden lang zufällige Teilnehmer markiert wurden, wird der Intervall nun beendet */
				clearInterval(intVal);
				/* Der zuletzt markierte Teilnehmer wird nun als Gewinner gezogen */
				var winnerNode = $('.member li.win');
				var winner = $('.member li.win').html();
				winnerNode.remove();
				/* Der Gewinner wird in der #andthewinneris ausgegeben. */
				$('#andthewinneris').html('Gewonnen hat: <strong>'+winner+'<\/strong>');
			}

PS: Der ganze Code ist aber verbesserungsfähig. So sind die ganzen globalen Variablen nur nötig, weil window.setTimeout() bzw. window.setInterval() mit einem String als Parameter aufgerufen werden, was man nicht machen sollte. Statt dessen sollte man eine Funktionsreferenz übergeben und dann kann man alle Variablen lokal machen.
Auch das HTML ist nicht ideal. So ist href="#" sinnfrei und produziert nur die zusätzliche JS-Zeile mit dem return false.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Auslosung</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!-- jQuery einbinden -->
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
		/* Wenn der Body geladen ist werden die enthaltenen Funktionen ausgeführt.
		$(document).ready(function(){ ... }); Alle in dieser enthaltenen Funktionen werden entsprechd erst bei geladenem Body ausgeführt */
		$(document).ready(function(){
			/* Der Button mit der id #auslosungstarten wird mit einer click Funktion belegt. */
			var intVal;
			$('#auslosungstarten').click(function(){
				/* Der Button selbst wird ausgeblendet */
				$(this).hide('slow');
 
				/* Ein Interval wird gestartet und die Funktion auslosung() alle 300 Milisekunden ausgeführt */
				intVal = window.setInterval(auslosung, 300);
				/* Nach 5 Sekunden wird der Gewinner gezogen */
				window.setTimeout(winneris, 5000);
			});
 
			function auslosung(){
				/* member enthält die Anzahl der Teilnehmer der Verlosung */
				var member = $('.member li').length;
				/* 
				Math.random() generiert eine Zufallszahl.
				Diese mit den Teilnehmern multipliziert ergebit den index Wert eines der Teilnehmer.
				 */
				var randNum = Math.floor(Math.random()*member);
				/* Die CSS Klasse "win" wird von allen li's entfernt und ... */
				$('.member li').removeClass('win');
				/* ... für den durch die Zufallszahl gewählten Teilnehmer neu gesetzt */
				$('.member li:eq('+randNum+')').addClass('win');
 
				/* Diese Funktion wiederholt sich alle 300 Milisekunden.
				Dadurch entsteht das Muster, dass immer ein anderer Teilnehmer markiert wird.
				*/
			}
 
			function winneris(){
				/* Nachdem 30 Sekunden lang zufällige Teilnehmer markiert wurden, wird der Intervall nun beendet */
				window.clearInterval(intVal);
				/* Der zuletzt markierte Teilnehmer wird nun als Gewinner gezogen */
				var winnerNode = $('.member li.win');
				var winner = $('.member li.win').html();
				winnerNode.remove();
				/* Der Gewinner wird in der #andthewinneris ausgegeben. */
				$('#andthewinneris').html('Gewonnen hat: <strong>'+winner+'<\/strong>');
				$('#auslosungstarten').show();
			}
		});
		</script>
		<style type="text/css">
		/* Das ist der CSS Code zum Verlosungs-System und bedarf meiner Meinung nach keiner weiteren Erklärung */
		*{outline:none;padding:0px;margin:0px;}
		body{padding:40px;font:14px "Myriad Pro";color:#333;}
		
		h1{margin-bottom:20px;font-size:26px;font-weight:normal;}
 
		.member{list-style:none;width: 100%;}
		.member li{padding:10px;width:160px;background:#efefef;border:1px solid #ddd;margin:0 10px 10px 0;float:left;text-align:center;}
		.member li.win{background:#fff9d7;border:1px solid #e2c822;}
		
		#auslosungstarten{padding:10px;width:160px;background:#f24f04;border:1px solid #c13d00;margin:0 10px 10px 0;float:left;text-align:center;font-weight:bold;text-decoration:none;display:block;color:#fff;margin-top:40px;}
		#andthewinneris{margin-top:40px;font-size:26px;font-weight:normal;color: #f24f04;}
		</style>
	</head>
	<body>
		<h1>Geschenkeverlosung</h1>
		<!-- Dashier ist die Liste der Teilnehmer von der Verlosung -->
		<div style="width:200px; float:left;">
		<ul class="member">
			<li>Daniel</li>
			<li>Karin</li>
			<li>Martin</li>
			<li>Brigitte</li>
			<li>Thomas</li>
			<li>Josip</li>
			<li>Nicole</li>
			<li>Daniela</li>
			<li>Gabi</li>
			<li>Sonja</li>
			<li>Heike</li>
			<li>Benno</li>
			<li>Klaus</li>
		</ul></div><div style="float:right;">
		<!-- Button zum starten der Verlosung -->
		<button id="auslosungstarten">Auslosung starten...</button>
		<!-- Ausgabe des Gewinners: -->
		<h1 id="andthewinneris"></h1></div><br clear="all" />
	</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben