JavaScript, um einen Lotterieeffekt zu erzielen
|
In diesem Artikel wird der spezifische JavaScript-Code zur Erzielung des Lotterieeffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt Die Auswirkungen dieser Implementierung sind wie folgt:
Die implementierte Funktion ist: Bei jedem Klick auf den Gewinnspiel-Button in der Mitte wird per Zufallsprinzip ein Kästchen als Gewinnspielergebnis ausgewählt. Wie implementieren wir also die Lotteriefunktion? Eigentlich ist es ganz einfach. Erstellen Sie zunächst das Gesamtgerüst mit HTML und CSS und stellen Sie dann mit JS einen Timer in der 1. Beim Entwerfen des Gesamtrahmens müssen wir für jede Box Ränder festlegen. Zu diesem Zeitpunkt werden wir feststellen, dass sich die Ränder überlappen , wodurch die Ränder dicker werden. Die Lösung besteht darin, 2. Wenn wir die Lotteriefunktion in js einstellen, können wir einen Timer A einstellen, um 3. Wie wird eine zufällige Veränderung erreicht? Rufen Sie zuerst Offensichtlich ist Timer A Wenn wir außerdem die Hintergrundfarbe einer Box in A ändern, müssen wir, um die letzte Box, deren Farbe zuletzt geändert wurde, auf ihre Originalfarbe zurückzusetzen, die Box aufzeichnen, deren Hintergrundfarbe zuletzt geändert wurde. Weitere Einzelheiten finden Sie im folgenden Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
.Container{
Breite: 400px;
Höhe: 400px;
Rand: 50px automatisch;
}
Spanne, #main{
Anzeige: Block;
Breite: 100px;
Höhe: 100px;
Rand: 2px rosa durchgezogen;
schweben: links;
Rand links: -2px;
Rand unten: -2px;
Textausrichtung: zentriert;
Zeilenhöhe: 100px;
Rahmenradius: 16px;
Kastenschatten: 2px 2px 3px rgba (226, 86, 109, 0,459);
}
#hauptsächlich{
Hintergrundfarbe: rgba(243, 97, 126, 0,651);
Cursor: Zeiger;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div>
Visualisierung
<span>Grafiken</span>
<span>Betriebssystem</span>
</div>
<div>
<span>Leschi</span>
<div id="main">Glücksziehung</div>
<span>Weißes Kaninchen</span>
</div>
<div>
<span>Limonade</span>
<span>Schwarzer Kaffee</span>
<span>Taro-Milchtee</span>
</div>
</div>
<Skript>
Geben Sie im Feld „main“ die Zeichenfolge „main“ ein.
let box = document.getElementsByTagName("span");
var num=null;
main.onclick=Funktion(){
lass Zeit = setzeIntervall(() => {
wenn(num!==null){
box[num].style.backgroundColor="weiß";
}
num = parseInt (Math.random() * 8);
box[num].style.backgroundColor="rgba(243, 97, 126, 0.651)";
konsole.log(num);
}, 120);
setzeTimeout(() => {
Intervall löschen(tem)
}, 3000);
}
</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:
|
<<: Beispielcode einer SVG-Schaltfläche basierend auf einer CSS-Animation
>>: Implementierung der Einbindung eines freigegebenen NFS-Verzeichnisses in einen Docker-Container
Artikel empfehlen
Tipps zum Festlegen von HTML-Tabellenrändern
Für viele HTML-Neulinge ist die Tabelle <table...
Beheben einiger häufiger Probleme in CSS (Hack-Logo/fester Container/vertikale Zentrierung von Bildern)
1. IE-Browsermodus Hack-Logo 1. CSS-Hack-Logo Code...
Konfigurationshandbuch für den Lastenausgleich auf Ebene 4 von Nginx
1. Einführung in Layer 4 Load Balancing Was ist L...
Analyse der MySql-Indexnutzungsstrategie
MySql-Index Indexvorteile 1. Sie können die Einde...
Analyse und Lösung der Gründe, warum geplante MySQL-Aufgaben nicht normal ausgeführt werden können
Inhaltsverzeichnis Vorwort Ursachenanalyse und Lö...
Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue und Verwendung von Sync zum Synchronisieren der Daten übergeordneter und untergeordneter Komponenten
Inhaltsverzeichnis Vorwort Untergeordnete Kompone...
Detaillierte Erklärung des Unterschieds zwischen chown- und chmod-Befehlen in Linux
Im Linux-System können sowohl chmod- als auch cho...
MySQL-Abfrage gibt an, dass das Feld keine Zahl und kein Komma SQL ist
Grundlegende SQL-Anweisungen MySQL-Abfrageanweisu...
MySQL partitioniert vorhandene Tabellen in der Datentabelle
Inhaltsverzeichnis So funktioniert es Betriebsabl...
MySQL InnoDB MRR-Optimierungshandbuch
Vorwort MRR ist die Abkürzung für Multi-Range Rea...
Üben Sie die Verwendung von Golang, um mit der Docker-API zu spielen
Inhaltsverzeichnis Installieren des SDK Lokalen D...
Implementierung von dynamischem REM für mobiles Layout
Dynamische REM 1. Lassen Sie uns zunächst die akt...
Ein Beispiel für die Implementierung einer einfachen Fingerklick-Animation mit CSS3 Animation
Dieser Artikel stellt hauptsächlich ein Beispiel ...
Eine Zusammenfassung der Gründe, warum MySQL keinen Datumsfeldindex verwendet
Inhaltsverzeichnis Hintergrund erkunden Zusammenf...
Linux verwendet den Befehl lsof, um den Status des Dateiöffnens zu überprüfen
Vorwort Wir alle wissen, dass unter Linux „alles ...