SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:Lotto-5.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Lotto - 6 aus 49</title>
<style>
.lotto input {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
.lotto label {
position: relative;
text-align: center;
color: firebrick;
border: thin solid firebrick;
line-height: 1.5;
}
.lotto :checked + label::after {
content: "×";
position: absolute;
left: -0.35rem;
top: -1.25rem;
right: 0;
font-size: 2.5rem;
color: darkblue;
opacity: .6;
}
.lotto fieldset {
display: grid;
gap: .25rem;
width: min-content;
}
.lotto fieldset:first-of-type {
grid-template: repeat(7, 1.5rem) / repeat(7, 1.5rem);
}
.lotto fieldset:last-of-type {
grid-template: 1.5rem / repeat(10, 1.5rem);
}
.lotto .error,
.lotto .success {
padding: 1rem 2rem;
}
.lotto .error {
background: #ffdddd;
color: red;
}
.lotto .success {
background: #ddffdd;
color: green;
white-space: pre-wrap;
}
</style>
<script>
class Lotto {
alert(text, type) {
if (text) {
setTimeout(() => {
this.alerts.textContent = text;
this.alerts.className = type ? type : "error";
}, 50);
} else {
this.alerts.textContent = "";
this.alerts.className = "";
}
}
alerts = document.createElement("p");
constructor() {
this.createGUI();
document.addEventListener("change", (e) => {
this.handleChange(e);
});
document.addEventListener("click", (e) => {
this.handleClick(e);
});
if (!Array.prototype.shuffle) {
Array.prototype.shuffle = function () {
const a = this;
let i = a.length - 1;
while (i > 0) {
const j = Math.floor(Math.random() * i);
[a[i], a[j]] = [a[j], a[i]];
i--;
}
return a;
};
}
}
container = document.createElement("form");
createGUI() {
this.container.classList.add("lotto");
document.body.appendChild(this.container);
const nm = this.container.appendChild(document.createElement("fieldset"));
nm.appendChild(document.createElement("legend"));
nm.lastChild.textContent = "6 aus 49";
for (let i = 1; i <= this.selection.m; i++) {
nm.appendChild(document.createElement("input"));
nm.lastChild.id = "i" + i;
nm.lastChild.type = "checkbox";
nm.appendChild(document.createElement("label"));
nm.lastChild.htmlFor = "i" + i;
nm.lastChild.textContent = i;
}
const s = this.container.appendChild(document.createElement("fieldset"));
s.appendChild(document.createElement("legend"));
s.lastChild.textContent = "Superzahl";
for (let i = 1; i <= 10; i++) {
s.appendChild(document.createElement("input"));
s.lastChild.id = "s" + i;
s.lastChild.name = "s";
s.lastChild.type = "radio";
if (i === 1) {
s.lastChild.setAttribute("checked", "checked");
}
s.appendChild(document.createElement("label"));
s.lastChild.htmlFor = "s" + i;
s.lastChild.textContent = i;
}
const b = this.container.appendChild(document.createElement("p"));
b.appendChild(document.createElement("button"));
b.lastChild.textContent = "Ziehung starten!";
b.lastChild.type = "button";
this.container.appendChild(this.alerts);
}
handleChange(e) {
const nm = this.container.querySelectorAll('[id^="i"]:checked');
this.alert();
if (nm.length > this.selection.n) {
e.target.click();
this.alert(`Sie können maximal ${this.selection.n} Zahlen für die Ziehung auswählen!`);
}
}
handleClick(e) {
if (this.container.querySelector("button") === e.target) {
const nm = this.container.querySelectorAll('[id^="i"]:checked');
const s = this.container.querySelector('[id^="s"]:checked');
const errors = [];
this.alert();
if (nm.length < this.selection.n) {
errors.push(`Sie benötigen ${this.selection.n} Zahlen für die Ziehung!`);
}
if (!s) {
errors.push("Sie haben noch keine Superzahl ausgewählt!");
}
if (errors.length) {
this.alert(errors.join(" - "));
} else {
const selectedNumbers = Array.from(nm).map((el) => parseInt(el.id.slice(1)));
const selectedSuperzahl = parseInt(s.id.slice(1));
const drawnNumbers = this.pick_n_outOf_m(this.selection.n, this.selection.m);
const drawnSuperzahl = this.pick_n_outOf_m(1, 10)[0];
const matches = this.compareNumbers(selectedNumbers, drawnNumbers);
this.alert(
`Ihre Zahlen: ${selectedNumbers.join(", ")} | Superzahl: ${selectedSuperzahl}\n` +
`Gezogene Zahlen: ${drawnNumbers.join(", ")} | Superzahl: ${drawnSuperzahl}\n` +
`Übereinstimmungen: ${matches.join(", ")} (${matches.length} Treffer)\n` +
`${selectedSuperzahl === drawnSuperzahl ? "Superzahl stimmt überein!" : "Superzahl stimmt nicht überein."}`,
"success"
);
}
}
}
selection = { n: 6, m: 49 };
pick_n_outOf_m(size, highestNumber) {
const pool = Array(highestNumber)
.fill()
.map((_, i) => i + 1)
.shuffle();
const pick = pool.slice(0, size);
pick.sort((a, b) => a - b);
return pick;
}
compareNumbers(selected, drawn) {
return selected.filter((num) => drawn.includes(num));
}
}
document.addEventListener("DOMContentLoaded", () => {
new Lotto();
});
</script>
</head>
<body>
<h1>Lotto – 6 aus 49</h1>
<p class="warnung">Glücksspiel kann süchtig machen.</p>
</body>
</html>
