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
Methode zum Erstellen eines privaten Docker-Warehouses basierend auf Harbor
Inhaltsverzeichnis 1. Einführung in Harbor 1. Har...
Detaillierte Erläuterung der Wissenspunkte zu Linux-Dateivorgängen
Verwandte Systemaufrufe für Dateioperationen erst...
Detaillierte Erläuterung der Funktionen und Verwendung allgemeiner MySQL-Speicher-Engines
Dieser Artikel veranschaulicht anhand von Beispie...
Beispielanalyse von Linux-Benutzer- und Gruppenbefehlen [Wechseln, Hinzufügen von Benutzern, Berechtigungskontrolle usw.]
Dieser Artikel beschreibt die Linux-Benutzer- und...
Detaillierte Erläuterung des vollständigen Anwendungsbeispiels zur Entwicklung von Hyperf unter Docker
Offizielle Hyperf-Website Hyperf offizielle Dokum...
Zusammenfassung der Unterschiede zwischen SQL und NoSQL
Hauptunterschiede: 1. Typ SQL-Datenbanken werden ...
Installation und Verwendung von Apache-Stresstest-Tools
1. Herunterladen Gehen Sie zur offiziellen Apache...
Implementierung langer Textschatten in Less in CSS3
Dieser Artikel stellt hauptsächlich die Implement...
Die neueste Installations- und Konfigurationsmethode für MySQL-5.7.21
1. Entpacken Sie das heruntergeladene MySQL-Kompr...
So empfangen Sie einen binären Dateistream in Vue, um eine PDF-Vorschau zu realisieren
Hintergrund-Controller @RequestMapping("/get...
js kehrt zur vorherigen Seite zurück und aktualisiert den Code
1. Javascript kehrt zur vorherigen Seite zurück hi...
JS implementiert das Schere-Stein-Papier-Spiel
In diesem Artikelbeispiel wird der spezifische JS...
Detaillierte Erklärung, warum die langsame Abfrageprotokollzeit von MySQL 5.7 8 Stunden hinter der Systemzeit liegt
Beim Überprüfen der langsamen Abfrage stellte ich...
Verschiedene Transformationseffekte beim Umschalten von HTML-Webseiten
<META http-equiv="Seite eingeben" CON...
React+Amap ermittelt Breiten- und Längengrad in Echtzeit und lokalisiert die Adresse
Inhaltsverzeichnis 1. Initialisieren Sie die Kart...