JavaScript implementiert das Klassenlotterie-Applet

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung des Klassenlotterie-Applets zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Projektanzeige

Im Projekt wird von einer Klassengröße von lediglich dreißig Personen ausgegangen.

HTML-Struktur

<div Klasse="Außencontainer">
    <div class="question">Wie viele Babys aus der Klasse xx möchten Sie zeichnen? </div>

    <div Klasse="Nummer">
        <input type="text" style="color: #999;" value="Bitte geben Sie die gewünschte Personenzahl ein" onblur="if (this.value == '') {this.value = 'Bitte geben Sie die gewünschte Personenzahl ein';this.style.color = '#999';}" onfocus="if (this.value == 'Bitte geben Sie die gewünschte Personenzahl ein') {this.value = '';this.style.color = '#424242';}">
    </div>

    <div Klasse="btnWrapper">
        <button>Ziehung starten</button>
    </div>

    <div Klasse="viewDiv"></div>

    <div class="foot">Produzent: chenyu-max</div>
</div>

CSS-Kaskadenstile

.äußererContainer {
    Rand oben: 100px;
}

.Frage {
    Rand oben: 30px;
    Breite: 100 %;
    Höhe: 50px;
    Zeilenhöhe: 50px;
    Schriftgröße: 25px;
    Übergang: alle 0,3 s linear; 
    /* Wenn sich die Farbe ändert, tritt ein Farbverlaufseffekt auf*/
    Textausrichtung: zentriert;
}

.Nummer {
    Rand oben: 30px;
    Anzeige: Block;
    links: 200px;
    Textausrichtung: zentriert;
}

.Nummer Eingabe {
    Höhe: 30px;
    Schriftgröße: 20px;
    Zeilenhöhe: 30px;
}

.btnWrapper {
    Rand oben: 30px;
    Breite: 100 %;
    Höhe: 30px;
    Textausrichtung: zentriert;
}

.btnWrapper-Schaltfläche {
    Gliederung: keine;
    Farbe: rgb(233, 8, 8);
    Cursor: Zeiger;
    Rahmenradius: 15px;
    Breite: 100px;
    Höhe: 25px;
    Zeilenhöhe: 19px;
}

.viewDiv {
    Rand: 20px automatisch;
    Breite: 900px;
    Höhe: 300px;
    Textausrichtung: zentriert;
    Schriftgröße: 30px;
    Zeilenhöhe: 50px;
    Rand: 1px tief schwarz;
}

.Fuß {
    Rand: 0 automatisch;
    Textausrichtung: zentriert;
}

JS-Logik

DOM-Element abrufen

var Eingabe = document.getElementsByTagName('Eingabe')[0];
var viewDiv = document.getElementsByClassName('viewDiv')[0];
var btn = document.getElementsByTagName('button')[0];
var Frage = document.getElementsByClassName('Frage')[0];

Andere Variablen

var arr = []; // Speichert die Matrikelnummer des Extraktionsortes var count = 0; // Zähler, der verwendet wird, um die Farbe der Frage zu ändern

Frage Farbänderung

setzeIntervall(Funktion() {
    var temp = Anzahl % 6;
    Schalter (temp) {
        Fall 0:
            Frage.Stil.Farbe = "rot";
            brechen;
        Fall 1:
            Frage.Stil.Farbe = "grün";
            brechen;
        Fall 2:
            Frage.Stil.Farbe = "blau";
            brechen;
        Fall 3:
            Frage.Stil.Farbe = "grau";
            brechen;
        Fall 4:
            Frage.Stil.Farbe = "lila";
            brechen;
        Fall 5:
            Frage.Stil.Farbe = "schwarz";
            brechen;
        Standard:
            brechen;
    }
    zählen++;
}, 700);

Lotterie-Logik

btn.onclick = Funktion() {
    //Überprüfe, ob die Eingabe zwischen 1 und 30 Personen liegt //Wenn die Klassengröße mehr als 30 beträgt, ändere zu input.value < class size + 1
    var check = (Funktion() {
        wenn (Eingabewert > 0 und Eingabewert < 31) {
            gibt true zurück;
        } anders {
            gibt false zurück;
        }
    }());

    // Wenn die Eingabe korrekt ist, dann Los ziehen if (check) {
        var num = Eingabe.Wert;
        arr = [];
        für (var i = 0; arr.length < num; i++) {
            // Zufallszahlen von 1 bis 30 generieren // Wenn Sie die Anzahl der Personen ändern müssen, ändern Sie einfach die 30 nach dem Multiplikationszeichen in die Anzahl der Personen, die Sie in Ihrer Klasse benötigen var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30
            varflag = wahr;
            arr.forEach(Funktion(Wert) {
                // Durchlaufe das Array, um zu verhindern, dass die generierten Zufallszahlen die vorhandenen Zahlen wiederholen, if (value == temp) {
                    Flagge = falsch;
                }
            })
            wenn (Flagge) {
                arr.push(temp);
            }
        }

        // Matrikelnummern der ausgewählten Studierenden aufsteigend sortieren arr.sort(function(a, b) {
            gib a - b zurück;
        })


        var str = arr.join(", ");
        viewDiv.innerHTML = " <span style='color : red'>Herzlichen Glückwunsch an die folgenden süßen/hübschen Jungs zur Auswahl! </span> </br> " + str;
    } anders {
        // Wenn nicht, gib eine Fehlermeldung aus // Die Personenanzahl kann geändert werden viewDiv.innerHTML = "<span style='color : red'>Bitte geben Sie die richtige Personenanzahl ein (1 ~ 30)</span>";
    }
}

Funktionalität hinzufügen

Dokument.onkeydown = Funktion(e) {
    // Drücken Sie die Eingabetaste, um das Onclick-Ereignis von btn auszulösen, if (e.keyCode == 13) {
        btn.onclick();
    }
}

Vollständiger Code

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Lasst uns Lose für die Kleinen der Klasse xx ziehen</title>
    <link rel="Symbol" href="">
    <Stil>
        .äußererContainer {
            Rand oben: 100px;
        }
        
        .Frage {
            Rand oben: 30px;
            Breite: 100 %;
            Höhe: 50px;
            Zeilenhöhe: 50px;
            Schriftgröße: 25px;
            Übergang: alle 0,3 s linear;
            Textausrichtung: zentriert;
        }
        
        .Nummer {
            Rand oben: 30px;
            Anzeige: Block;
            links: 200px;
            Textausrichtung: zentriert;
        }
        
        .Nummer Eingabe {
            Höhe: 30px;
            Schriftgröße: 20px;
            Zeilenhöhe: 30px;
        }
        
        .btnWrapper {
            Rand oben: 30px;
            Breite: 100 %;
            Höhe: 30px;
            Textausrichtung: zentriert;
        }
        
        .btnWrapper-Schaltfläche {
            Gliederung: keine;
            Farbe: rgb(233, 8, 8);
            Cursor: Zeiger;
            Rahmenradius: 15px;
            Breite: 100px;
            Höhe: 25px;
            Zeilenhöhe: 19px;
        }
        
        .viewDiv {
            Rand: 20px automatisch;
            Breite: 900px;
            Höhe: 300px;
            Textausrichtung: zentriert;
            Schriftgröße: 30px;
            Zeilenhöhe: 50px;
            Rand: 1px tief schwarz;
        }
        
        .Fuß {
            Rand: 0 automatisch;
            Textausrichtung: zentriert;
        }
    </Stil>
</Kopf>

<Text>

    <div Klasse="Außencontainer">
        <div class="question">Wie viele Babys aus der Klasse xx möchten Sie zeichnen? </div>

        <div Klasse="Nummer">
            <input type="text" style="color: #999;" value="Bitte geben Sie die gewünschte Personenzahl ein" onblur="if (this.value == '') {this.value = 'Bitte geben Sie die gewünschte Personenzahl ein';this.style.color = '#999';}" onfocus="if (this.value == 'Bitte geben Sie die gewünschte Personenzahl ein') {this.value = '';this.style.color = '#424242';}">
        </div>

        <div Klasse="btnWrapper">
            <button>Ziehung starten</button>
        </div>

        <div Klasse="viewDiv"></div>

        <div class="foot">Produzent: chenyu-max</div>
    </div>

    <Skript>
        var Eingabe = document.getElementsByTagName('Eingabe')[0];
        var viewDiv = document.getElementsByClassName('viewDiv')[0];
        var btn = document.getElementsByTagName('button')[0];
        var Frage = document.getElementsByClassName('Frage')[0];

        var arr = []; // Speichert die Matrikelnummer der Extraktion var count = 0; // Zähler, der für den Farbmodifikator der Frage verwendet wird setInterval(function() {
            var temp = Anzahl % 6;
            Schalter (temp) {
                Fall 0:
                    Frage.Stil.Farbe = "rot";
                    brechen;
                Fall 1:
                    Frage.Stil.Farbe = "grün";
                    brechen;
                Fall 2:
                    Frage.Stil.Farbe = "blau";
                    brechen;
                Fall 3:
                    Frage.Stil.Farbe = "grau";
                    brechen;
                Fall 4:
                    Frage.Stil.Farbe = "lila";
                    brechen;
                Fall 5:
                    Frage.Stil.Farbe = "schwarz";
                    brechen;
                Standard:
                    brechen;
            }
            zählen++;
        }, 700);


        Dokument.onkeydown = Funktion(e) {
            // Drücken Sie die Eingabetaste, um das Onclick-Ereignis von btn auszulösen, if (e.keyCode == 13) {
                btn.onclick();
            }
        }

        btn.onclick = Funktion() {
            //Überprüfe, ob die Eingabe zwischen 1 und 30 Personen liegt //Wenn die Klassengröße mehr als 30 beträgt, ändere zu input.value < class size + 1
            var check = (Funktion() {
                wenn (Eingabewert > 0 und Eingabewert < 31) {
                    gibt true zurück;
                } anders {
                    gibt false zurück;
                }
            }());

            // Wenn die Eingabe korrekt ist, dann Los ziehen if (check) {
                var num = Eingabe.Wert;
                arr = [];
                für (var i = 0; arr.length < num; i++) {
                    // Zufallszahlen von 1 bis 30 generieren // Wenn Sie die Anzahl der Personen ändern müssen, ändern Sie einfach die 30 nach dem Multiplikationszeichen in die Anzahl der Personen, die Sie in Ihrer Klasse benötigen var temp = Math.floor(Math.random() * 30 + 1); // 1 ~ 30
                    varflag = wahr;
                    arr.forEach(Funktion(Wert) {
                        // Durchlaufe das Array, um zu verhindern, dass die generierten Zufallszahlen die vorhandenen Zahlen wiederholen, if (value == temp) {
                            Flagge = falsch;
                        }
                    })
                    wenn (Flagge) {
                        arr.push(temp);
                    }
                }

                // Matrikelnummern der ausgewählten Studierenden aufsteigend sortieren arr.sort(function(a, b) {
                    gib a - b zurück;
                })


                var str = arr.join(", ");
                viewDiv.innerHTML = " <span style='color : red'>Herzlichen Glückwunsch an die folgenden süßen/hübschen Jungs zur Auswahl! </span> </br> " + str;
            } anders {
                // Wenn nicht, gib eine Fehlermeldung aus // Die Personenanzahl kann geändert werden viewDiv.innerHTML = "<span style='color : red'>Bitte geben Sie die richtige Personenanzahl ein (1 ~ 30)</span>";
            }
        }
    </Skript>
</body>

</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: