Karteireiter

<!doctype html>
<html>
<head>
	<title>Lotto-Simulation</title>
    <meta name="viewport" content="width=device-width">
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type='text/javascript' src='ziehungEM.js'></script>
	<script type="text/javascript"> 
      $(document).ready(function() {
         erstelleKorb(50);
         $("#sternZiehen").attr("disabled","disabled"); // zu Beginn wird Button für Sternziehung deaktiviert
         
		 /********* Funktion um aktuellen Korb auszugeben *********
		 $("#korbButton").click( function () {
            var ausgabe = "Korb: ";
            for (i=0;i<zahlenKorb.length;i++) {
               ausgabe += zahlenKorb[i] + " ,";           
            }
            alert(ausgabe);
         });*/
         
         $("#kugelZiehen").click(function () {
            //$("#animationKugeln").attr("src","kugeln.gif").attr("src","kugeln_animiert.gif");
			$("#animationKugeln").addClass("drehen");
			window.setTimeout(function () {
				ziehungKugel();
				$("#animationKugeln").removeClass();
			},2000);	
		 });
	  				
		 $("#sternZiehen").click(function () {
			$("#animationStern").addClass("drehen");
			window.setTimeout(function () {
				ziehungStern();
				$("#animationStern").removeClass();
			},2000);
		 });	
		 
					
		  $("#buttSimulation").click(function () {
			var anzahl = $("#anzZiehungen").val();
			if (anzahl > 1000000) {
				alert("Bitte max 1'000'000 eingeben!");		
			}
			else {
				simulationZiehungen(anzahl);
			}
		  });
			
		 
      });
   </script>
</head>
<body>
<div id="wrapper">
	<header>
		<img src="logo.png" alt="Lotto Simulation" >
		<p>5 Kugeln aus 50 und 2 von 12 Sternen (Euro Millions)</p>
	</header>
	<section id="content">
	<form name="formZiehung" action="ziehung_speichern.php">
		<section id="kugeln">
			<h1>Ziehung der Kugeln</h1>
			<img src="kugeln.gif" id="animationKugeln" alt="Lotto-Kugeln">
			<ul>
				<li><input type="text" readonly ></li>		
				<li><input type="text" readonly ></li>	
				<li><input type="text" readonly ></li>	
				<li><input type="text" readonly ></li>	
				<li><input type="text" readonly ></li>		
				<li><input type="button" id="kugelZiehen" value="ziehen"></li>	
			</ul>
		</section>
		<section id="sterne">
			<h1>Ziehung der Sterne</h1>
            <img src="stern.png" id="animationStern" alt="Stern">
			<ul>
				<li><input type="text" readonly ></li>		
				<li><input type="text" readonly ></li>		
				<li><input type="button" id="sternZiehen" value="ziehen"></li>	
			</ul>
		</section>
	</form>
    </section> 
    
	<section id="simulation">
	   <h1>Mehrere Ziehungen simulieren</h1>
		<p>Bitte Anzahl gewünschter Ziehungen eingeben (max 1 Million): <input type="number" id="anzZiehungen">
		<input type="button" id="buttSimulation" value="simulieren"></p>
	</section>
	
</div>
</body>
</html>

<!doctype html>
<html>
<head>
	<title>Lotto-Simulation</title>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type='text/javascript' src='ziehungLotto.js'></script>
	<script type="text/javascript"> 
      $(document).ready(function() {
         erstelleKorb(42);
         $("#sternZiehen").attr("disabled","disabled"); // zu Beginn wird Button für Sternziehung deaktiviert
         
         $("#korbButton").click( function () {
            var ausgabe = "Korb: ";
            for (i=0;i<zahlenKorb.length;i++) {
               ausgabe += zahlenKorb[i] + " ,";           
            }
            alert(ausgabe);
         });
         
         $("#kugelZiehen").click(function () {
            $("#animationKugeln").attr("src","kugeln.gif").attr("src","kugeln_animiert.gif");
				window.setTimeout("ziehungKugel()",2000);	
			});
			
			$("#sternZiehen").click(function () {
				ziehungStern();
			});
			/*
			$("#buttSimulation").click(function () {
				var anzahl = $("#anzZiehungen").val();
				var berechnung = simulationZiehungen(anzahl);
				$("#ergebnis").remove();
				$("#simulation").append("<div id='ergebnis'>"+berechnung+"</div>");
			});*/
      });
   </script>
</head>
<body>
<div id="wrapper">
	<header>
		<img src="logo.png" alt="Lotto Simulation" >
		<p>6 Kugeln aus 42 und 1 Glückszahl von 6 (Lotto)</p>
	</header>
	<section id="content">
	<form name="formZiehung" action="ziehung_speichern.php">
		<section id="kugeln">
			<h1>Ziehung der Kugeln</h1>
			<img src="kugeln.gif" id="animationKugeln" alt="Lotto-Kugeln">
			<ul>
				<li><input type="text" readonly ></li>		
				<li><input type="text" readonly ></li>	
				<li><input type="text" readonly ></li>	
				<li><input type="text" readonly ></li>	
				<li><input type="text" readonly ></li>		
				<li><input type="text" readonly ></li>	
				<li><input type="button" id="kugelZiehen" value="ziehen"></li>	
			</ul>
		</section>
		<section id="sterne">
			<h1>Glückszahl</h1>
			<ul>
				<li><input type="text" readonly ></li>			
				<li><input type="button" id="sternZiehen" value="ziehen"></li>	
			</ul>
		</section>
	</form>
</div>
</body>
</html>

html,body {
	font: 14px calibri, arials, sans-serif;
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #f0f8ff;
}

#wrapper {
	position: relative;
	margin: 0 auto;
	min-width: 420px;
	max-width: 600px;
	background-color: white;
	box-shadow: 0px 0px 10px #888888;
	-moz-box-shadow: 0px 0px 10px #888888;
	-webkit-box-shadow: 0px 0px 10px #888888;
}

#content {
   padding: 10px;
}

header {
   background-image: url(textur.jpg);
   text-align: center;
   padding-bottom: 10px;
}

header p {
	font-size: 18px;
	margin-top: 0px;
}

#kugeln h1, #sterne h1 {
	font-size: 18px;
}

#animationKugeln, #animationStern {
   float: left;
   margin-right: 20px;
   margin-bottom: 30px;
}

ul {
	margin: 80px 0px 0px 0px;
	padding: 0px;
}

ul li {
	list-style-type: none;
	display: inline;
}

/***** im Uhrzeigersinn drehen ****/
.drehen {
	transform: rotate(360deg);
	transition: all 1.5s;
}

#sterne {
   clear: left;
}

input[type=text]{
	width: 20px;
	text-align: center;
}

#simulation {
	clear: both;
	padding: 10px;	
}

#anzZiehungen {
	width: 70px;
}

.statTitel {
	display: inline-block;
	width: 60px;
	text-align: left;	
}

.statistik {
	display: inline-block;
	width: 75px;
	text-align: right;
}

<!doctype html>
<html>
<head>
	<title>Lotto-Simulation</title>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type='text/javascript' src='ziehungNeu.js'></script>
	<script type="text/javascript"> 
      $(document).ready(function() {
         erstelleKorb(50);
         $("#sternZiehen").attr("disabled","disabled"); // zu Beginn wird Button für Sternziehung deaktiviert
         
         $("#korbButton").click( function () {
            var ausgabe = "Korb: ";
            for (i=0;i<zahlenKorb.length;i++) {
               ausgabe += zahlenKorb[i] + " ,";           
            }
            alert(ausgabe);
         });
         
         $("#kugelZiehen").click(function () {
            $("#animationKugeln").attr("src","kugeln.gif").attr("src","kugeln_animiert.gif");
				window.setTimeout("ziehungKugel()",2000);	
			});
			
			$("#sternZiehen").click(function () {
				ziehungStern();
			});
			/*
			$("#buttSimulation").click(function () {
				var anzahl = $("#anzZiehungen").val();
				var berechnung = simulationZiehungen(anzahl);
				$("#ergebnis").remove();
				$("#simulation").append("<div id='ergebnis'>"+berechnung+"</div>");
			});*/
      });
   </script>
</head>
<body>
<div id="wrapper">
	<header>
		<img src="logo.png" alt="Lotto Simulation" >
		<p>5 Kugeln aus 50 und 2 von 11 Sternen (Euro Millions)</p>
	</header>
	<section id="content">
	<form name="formZiehung" action="ziehung_speichern.php">
		<section id="kugeln">
			<h1>Ziehung der Kugeln</h1>
			<img src="kugeln.gif" id="animationKugeln" alt="Lotto-Kugeln">
			<ul>
				<li><input type="text" readonly ></li>		
				<li><input type="text" readonly ></li>	
				<li><input type="text" readonly ></li>	
				<li><input type="text" readonly ></li>	
				<li><input type="text" readonly ></li>		
				<li><input type="button" id="kugelZiehen" value="ziehen"></li>	
			</ul>
		</section>
		<section id="sterne">
			<h1>Ziehung der Sterne</h1>
			<ul>
				<li><input type="text" readonly ></li>		
				<li><input type="text" readonly ></li>		
				<li><input type="button" id="sternZiehen" value="ziehen"></li>	
			</ul>
		</section>
	</form>
	<section id="simulation">
	   <h1>Mehrere Ziehungen simulieren</h1>
		<p>Bitte Anzahl gewünschter Ziehungen eingeben: <input type="text" id="anzZiehungen">
		<input type="button" id="buttSimulation" value="simulieren"></p>
	</section>
	<input type="button" id="korbButton" value="Inhalt Korb anzeigen">
	</section> 
</div>
</body>
</html>

var ziehungNr = 1;

function runden(wert,dezStellen) {
	var faktor = Math.pow(10,dezStellen);
	var ergebnis = Math.round(wert*faktor)/faktor;
	return ergebnis;
}

// globale Variablen
var ziehungNr = 0;
var totalZahlen = 0;
var zahlenKorb = []; // hier werden die noch verfügbaren Zahlen/Sterne gespeichert

function erstelleKorb(anzahl) {
   zahlenKorb.length = 0; // falls noch ein Array besteht wird er entleert
	for (i=0;i<anzahl;i++) {
		zahlenKorb[i] = i+1;	
	}  
}

function ziehungKugel() {
   anzZiehungen = 5;
   totalZahlen = 50-ziehungNr; // durch die Ziehungen werden es immer weniger Zahlen im Korb
	var zufallszahl = 0;
	zufallszahl = Math.floor(Math.random() * totalZahlen); // Zufallszahl generieren
	$("#kugeln input:text").eq(ziehungNr).val(zahlenKorb[zufallszahl]); // die zufällige Stelle im Zahlenkorb ausgeben
	zahlenKorb.splice(zufallszahl,1); // die Zufallszahl wird aus dem Array gelöscht
	ziehungNr++;
	
	if (ziehungNr == anzZiehungen) {
	  $("#sternZiehen").removeAttr("disabled");
	  $("#kugelZiehen").attr("disabled","disabled");
	  ziehungNr = 0;
	  erstelleKorb(12);  
	}
}

function ziehungStern() {
   anzZiehungen = 2;
   totalZahlen = 12-ziehungNr;
	var zufallszahl = 0;
	zufallszahl = Math.floor(Math.random() * totalZahlen); // Zufallszahl generieren
	$("#sterne input:text").eq(ziehungNr).val(zahlenKorb[zufallszahl]); // die zufällige Stelle im Zahlenkorb ausgeben
	zahlenKorb.splice(zufallszahl,1); // die Zufallszahl wird aus dem Array gelöscht
	ziehungNr++;
	
	if (ziehungNr == anzZiehungen) {
	  $("#sternZiehen").attr("disabled","disabled"); // Lotto-Spiel zu Ende (alles gezogen, beide Buttons deaktiviert)  
	}
}

function runden(wert,dezStellen) {
	var faktor = Math.pow(10,dezStellen);
	var ergebnis = Math.round(wert*faktor)/faktor;
	return ergebnis;
}

for (ku=0;ku<5;ku++) {
			zufallszahl = Math.floor(Math.random() * 50); //Zufallszahlen zwischen 0...49
			kugelnStats[zufallszahl+1]++
			kugeln.splice(zufallszahl,1);
		}

for (m=0;m<2;m++) {
			zufallszahl = Math.floor(Math.random() * 12); //Zufallszahlen zwischen 0...11
			sterneStats[zufallszahl+1]++;
			sterne.splice(zufallszahl,1);
		}
	}
	
	$("#ergebnis").remove();
	codeSimulation = "";
	
	// Ausgabe der Kugel Ziehungen:
	codeSimulation += "<p><b>Bei " + tausender(anz) + " Ziehungen sollte im statistischen Mittel jede Kugel <i>" + tausender(Math.round(anz/10)) + "</i> mal gezogen werden.</b><br><br>";
	
	for(g=1;g<=50;g++) {
		codeSimulation += "<span class='statTitel'>Kugel "+g+":</span><span class='statistik'>" + tausender(kugelnStats[g]) + "</span><br>";	
	}
	codeSimulation += "</p>";	
	
	// Ausgabe der Sterne Ziehungen:
	codeSimulation += "<p><b>Bei "+ tausender(anz) +" Ziehungen sollte im statistischen Mittel jeder Stern <i>" + tausender(Math.round(anz*2/12)) + "</i> mal gezogen werden.</b><br><br>";
	for (h=1;h<=12;h++) {
		codeSimulation += "<span class='statTitel'>Stern "+h+":</span><span class='statistik'>" + tausender(sterneStats[h]) + "</span><br>";	
	}
	codeSimulation += "</p>";
	
	$("#simulation").append("<div id='ergebnis'>"+codeSimulation+"</div>");
}

// globale Variablen
var ziehungNr = 0;
var totalZahlen = 0;
var zahlenKorb = []; // hier werden die noch verfügbaren Zahlen/Sterne gespeichert

function erstelleKorb(anzahl) {
   zahlenKorb.length = 0; // falls noch ein Array besteht wird er entleert
	for (i=0;i<anzahl;i++) {
		zahlenKorb[i] = i+1;	
	}  
}

function ziehungKugel() {
   anzZiehungen = 6;
   totalZahlen = 42-ziehungNr; // durch die Ziehungen werden es immer weniger Zahlen im Korb
	var zufallszahl = 0;
	zufallszahl = Math.floor(Math.random() * totalZahlen); // Zufallszahl generieren
	$("#kugeln input:text").eq(ziehungNr).val(zahlenKorb[zufallszahl]); // die zufällige Stelle im Zahlenkorb ausgeben
	zahlenKorb.splice(zufallszahl,1); // die Zufallszahl wird aus dem Array gelöscht
	ziehungNr++;
	
	if (ziehungNr == anzZiehungen) {
	  $("#sternZiehen").removeAttr("disabled");
	  $("#kugelZiehen").attr("disabled","disabled");
	  ziehungNr = 0;
	  erstelleKorb(6);  
	}
}

function ziehungStern() {
   anzZiehungen = 1;
   totalZahlen = 6-ziehungNr;
	var zufallszahl = 0;
	zufallszahl = Math.floor(Math.random() * totalZahlen); // Zufallszahl generieren
	$("#sterne input:text").eq(ziehungNr).val(zahlenKorb[zufallszahl]); // die zufällige Stelle im Zahlenkorb ausgeben
	zahlenKorb.splice(zufallszahl,1); // die Zufallszahl wird aus dem Array gelöscht
	ziehungNr++;
	
	if (ziehungNr == anzZiehungen) {
	  $("#sternZiehen").attr("disabled","disabled"); // Lotto-Spiel zu Ende (alles gezogen, beide Buttons deaktiviert)  
	}
}

// globale Variablen
var ziehungNr = 0;
var totalZahlen = 0;
var zahlenKorb = []; // hier werden die noch verfügbaren Zahlen/Sterne gespeichert

function erstelleKorb(anzahl) {
   zahlenKorb.length = 0; // falls noch ein Array besteht wird er entleert
	for (i=0;i<anzahl;i++) {
		zahlenKorb[i] = i+1;	
	}  
}

function ziehungStern() {
   anzZiehungen = 2;
   totalZahlen = 11-ziehungNr;
	var zufallszahl = 0;
	zufallszahl = Math.floor(Math.random() * totalZahlen); // Zufallszahl generieren
	$("#sterne input:text").eq(ziehungNr).val(zahlenKorb[zufallszahl]); // die zufällige Stelle im Zahlenkorb ausgeben
	zahlenKorb.splice(zufallszahl,1); // die Zufallszahl wird aus dem Array gelöscht
	ziehungNr++;
	
	if (ziehungNr == anzZiehungen) {
	  $("#sternZiehen").attr("disabled","disabled"); // Lotto-Spiel zu Ende (alles gezogen, beide Buttons deaktiviert)  
	}
}

function runden(wert,dezStellen) {
	var faktor = Math.pow(10,dezStellen);
	var ergebnis = Math.round(wert*faktor)/faktor;
	return ergebnis;
}

for (k=0;k<5;k++) {
			zufallszahl = Math.floor(Math.random() * 50); //Zufallszahlen zwischen 0...49
			kugelnStats[zufallszahl+1]++
			kugeln.splice(zufallszahl,1);
		}

for (m=0;m<2;m++) {
			zufallszahl = Math.floor(Math.random() * 7); //Zufallszahlen zwischen 0...6
			sterneStats[zufallszahl+1]++
			sterne.splice(zufallszahl,1);
		}
	}
	
	// Ausgabe der Kugel Ziehungen:
	codeSimulation += "<p><b>Bei "+anz+" Ziehungen sollte im statistischen Mittel jede Kugel <i>"+Math.round(anz/10)+"</i> mal gezogen werden.</b><br>";
	for (g=1;g<=50;g++) {
		codeSimulation += "Kugel "+g+": <span class='statistik'>"+kugelnStats[g]+"</span> / "+runden(kugelnStats[g]/anz*100,2)+"%<br>";	
	}
	codeSimulation += "</p>";	
	
	// Ausgabe der Sterne Ziehungen:
	codeSimulation += "<p><b>Bei "+anz+" Ziehungen sollte im statistischen Mittel jeder Stern <i>"+Math.round(anz*2/7)+"</i> mal gezogen werden.</b><br>";
	for (h=1;h<=7;h++) {
		codeSimulation += "Stern "+h+": <span class='statistik'>"+sterneStats[h]+"</span> / "+runden(sterneStats[h]/anz*100,2)+"%<br>";	
	}
	codeSimulation += "</p>";
	
	return codeSimulation;
}