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 Idee, mit CSS-Animation den Punkteeffekt zu erzielen
Im aktuellen Projekt müssen wir einen Effekt zum ...
Detaillierte Erläuterung des Beobachtermodus ausgehend von der Komponentenwertübertragung von Vue
Inhaltsverzeichnis Beobachtermuster Vue-Pass-Wert...
Node+Socket realisiert einfache Chatroom-Funktion
In diesem Artikel wird der spezifische Code von N...
JavaScript implementiert einfache Rechnerfunktion
In diesem Artikelbeispiel wird der spezifische Ja...
Lösung für das Problem, dass die lokale MySQL-Anmeldung keine Portnummer zum Anmelden verwenden kann
Als ich mich kürzlich lokal unter Linux anmeldete...
Detaillierte Analyse des Befehls chmod zum Ändern der Dateiberechtigungen unter Linux
Verwenden Sie den Linux-Befehl chmod , um zu steu...
Hallo – Erfahrungsaustausch zum Entwurf von Dialogfeldern
„Was ist los?“ Sofern Sie nicht an bestimmte Arten...
So erzielen Sie mit CSS einen Daten-Hotspot-Effekt
Die Wirkung ist wie folgt: analysieren 1. Hier se...
Beispielcode zur Implementierung des Regentropfen-Animationseffekts mit CSS
Glasfenster Was wir heute erreichen werden, ist d...
Erfahren Sie in einem Artikel mehr über TypeScript-Datentypen
Inhaltsverzeichnis Grundtypen jeder Typ Arrays Tu...
Detaillierte Erläuterung der MySQL 8.0-Richtlinie zum Ablauf von Passwörtern
Ab MySQL 8.0.16 können Sie eine Richtlinie zum Ab...
Eine kurze Diskussion über den Werttransfer zwischen Vue-Komponenten (einschließlich Vuex)
Inhaltsverzeichnis Vom Vater zum Sohn: Sohn zum V...
Einfaches Verständnis und Beispiele für MySQL Index Pushdown (ICP)
Vorwort Index Condition Pushdown (ICP) ist eine n...
Docker-Bereitstellungs- und Installationsschritte für Jenkins
Zuerst benötigen wir einen Server mit installiert...
Hinweise zum Upgrade auf mysql-connector-java8.0.27
Kürzlich wurde bei einem Online-Sicherheitsscan e...