JavaScript / DHTML

Einfaches Auslosungs / Verlosungs-System mit JavaScript jQuery

WordPress Entwickler und Webdesigner

Vor ein paar Tagen haben wir hier ein Video2Brain Video-Training für GIMP als DVD verlost, bei der Verlosung kam ein nettes kleines JavaScript zum Einsatz. Dieses JavaScript auf jQuery Basis hat mit einem kleinen Zufallsgenerator den entsprechenden Gewinner ausgelost. In den Kommentaren kam die Frage auf, wie das Script funktioniert. Das möchte ich euch in diesem simplen Tutorial nun erklären.

Bevor wir anfangen, solltet ihr euch allerdings einmal das Auslosungs-System in Action ansehen, hier das Video von der Verlosung:

And the winner is… Verlosung: Video2Brain Video-Training für GIMP from Pascal Bajorat on Vimeo.

Das Script dazu ist relativ simpel und ist wie folgt aufgebaut:

Anzeige:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Webdesign-Podcast.de - 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 30 Sekunden wird der Gewinner gezogen */
				window.setTimeout("winneris()", 30000);
				/* 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>Webdesign-Podcast.de Aulosungs-System</h1>
		<!-- Dashier ist die Liste der Teilnehmer von der Verlosung -->
		<ul class="member">
			<li>Name 1</li>
			<li>Name 2</li>
			<li>Name 3</li>
			<li>Name 4</li>
		</ul><br clear="all" />
		<!-- Button zum starten der Verlosung -->
		<a href="#" id="auslosungstarten">Auslosung starten...</a>
		<!-- Ausgabe des Gewinners: -->
		<h1 id="andthewinneris"></h1>
	</body>
</html>

Wer das Script gerne für eigene Verlosungen verwenden möchte kann dies gerne tun.

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

13 Antworten zu “Einfaches Auslosungs / Verlosungs-System mit JavaScript jQuery”

  1. wie genau muss ich des einfügen. Wenn ich den oben stehenden code in einen editor kopiere und dann als auslosen.html speicher und diese datei öffne klappt das auslosen nicht.

    an was liegt das?

    Danke im voraus!

  2. Angenommen ich hätte jetzt gern dass wenn eines dieser felder zb. Name2 gewinnt das eine weitere aktion automatisch ausgelöst wird. Wie z.B. eine pdf soll sich öffnen. Kann man dieses script um so eine abfrage erweitern? oder benötigt man dafür php? Ich kenn mich leider mit der programmierung noch so richtig aus da ich noch in den kinderschuhen stecke. Aber genau sowas hätte ich mir vorgestellt. Wäre für jeden tipp echt froh!

    gruß Tomas

  3. wow das ist ja absolut genial und genau was ich gesucht habe. Es funktioniert einwandfrei.
    Gratuliere zu diesem tollen Script und herzlichen Dank, dass man es nutzen darf.

    • Das wäre genial!
      Ich bin leider eine absolute Null was JS und jQuery angeht. Wie müsste das denn im Code aussehen?

      Wenn ich könnte würde ich dir ein Bier dafür ausgeben 😉

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.