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: JavaScript, jQuery, Podcast, Verlosung, Webdesign
Ich habs doch gewusst 😉 Bei dir ist nie etwas einfach auch wenn du es immer wieder sagst.
Danke für das Tut.
Hm, also ich finde es einfach 😉
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!
fehlt die jquery??
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
Jquery fehlt, wo bekomme ich die her?
jquery.com ?!
Selbst wenn ich die jquery herunterlade, funzt es nicht.
Das Script ist okay und funktioniert ohne Probleme, ggf. checken ob da lokal alles korrekt eingestellt ist: Pfade und Änderungen am Script selber.
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.
Gibt es eine Möglichkeit den Gewinner automatisch aus der Liste zu entfernen? Das wär spitze.
Du kannst die ausgewählte Person nach ein paar Sekunden, z.B. mit einem Timeout und der remove() Funktion von jQuery entfernen.
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 😉