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
Detaillierte Erläuterung der neuen relationalen Datenbankfunktionen in MySQL 8.0
Vorwort Die neueste Version von MySQL 8.0 ist 8.0...
So verbergen Sie die Versionsnummer in Nginx
Nginx verbirgt die Versionsnummer In einer Produk...
Detailliertes Tutorial zur Installation von Docker unter Windows
Da meine lokale MySQL-Version relativ niedrig ist...
Vue implementiert einfache Rechnerfunktion
In diesem Artikelbeispiel wird der spezifische Co...
So verwenden Sie die Vue-Cache-Funktion
Inhaltsverzeichnis Cache-Funktion in vue2 Transfo...
Zusammenfassung der allgemeinen APIs und erweiterten APIs von Vue
Inhaltsverzeichnis nächstesTick Mixins $forceUpda...
So verwenden Sie VirtualBox zum Erstellen einer lokalen virtuellen Maschinenumgebung auf dem Mac
1. Big Data und Hadoop Um Big Data zu studieren u...
MySQL implementiert Zeichenfolgenverkettung, Abfangen, Ersetzen und Positionssuchvorgänge
MySQL-Zeichenfolgenverkettung, -Abfangen, -Ersetz...
Detaillierte Erläuterung der nahtlosen horizontalen LVM-Festplattenerweiterung basierend auf Linux
Umfeld Name Eigentum CPU x5650 Erinnerung 4G Sche...
Beenden Sie eine Reihe von MySQL-Datenbanken mit nur einem Shell-Skript wie diesem (empfohlen)
Ich wurde am frühen Morgen durch einen Anruf gewe...
Unverzichtbar für die Frontend-Entwicklung: 12 empfohlene Tools zum Testen der Browserkompatibilität
Für Frontend-Entwickler ist es eine zeitaufwändig...
Prozessdiagramm zum Aufbau des Linux RabbitMQ-Clusters
1. Allgemeine Schritte Zu Beginn haben wir die In...
So installieren Sie MySQL für Anfänger (erwiesenermaßen effektiv)
1. Software-Download MySQL-Download und -Installa...
Webpack erstellt ein Gerüst zum Verpacken von TypeScript-Code
Erstellen eines Ordners Verzeichnisstruktur: daba...
Beispiel für die Konfiguration von nginx zur Implementierung von SSL
Umgebungsbeschreibung Serversystem: Ubuntu 18.04 ...