js, um eine einfache Lotteriefunktion zu erreichen
|
In diesem Artikel wird der spezifische Code von js zur Implementierung einer einfachen Lotteriefunktion zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt 1. Szenario:Klicken Sie auf die Schaltfläche, um die zufällige Preisverlosung zu starten. Wenn sie stoppt, ist der Preis, der auf dem großen Bildschirm verbleibt, der gezogene Preis („Danke“ bedeutet, dass kein Preis vergeben wird). 2. Ideen:Wie wir alle wissen, ist bei Lotterien der Zufall das Wichtigste und die Gewinne werden aus einer Vielzahl von Preisen gezogen. Dann können Sie die Richtung sperren: Verwenden Sie ein Array zum Speichern der Auszeichnungsnamen und verwenden Sie Math.random(), um eine Zufallszahl zwischen 0 (einschließlich) und 1 (exklusiv) zurückzugeben. Solange Sie den Index des Arrays zufällig auswählen können, können Sie den Preis zufällig auswählen. Und nun ohne weitere Umschweife der Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
</Kopf>
<Text>
<button id="start">Starten</button>
<button id="end">Stopp</button>
<h1 id="txt">Bitte beginnen</h1>
<Skript>
var ostart=document.getElementById('start');
var oend=document.getElementById('end');
var otxt = document.getElementById('txt');
var Zeitgeber;
var m;
var list=['Handy','Pad','Pad','Einkaufskarte','Einkaufskarte','Einkaufskarte','Lautsprecher','danke','danke','danke','danke','danke','danke','danke','danke','danke','danke','danke','danke']
// Starten Sie ostart.onclick=function(){
Timer = Intervall festlegen(Funktion(){
// Zufallszahl generieren m=parseInt(Math.random()*list.length);
// Ändern Sie das HTML
otxt.innerHTML=Liste[m]
//Ändern Sie das Bild.setAttribute('src',list[m])
},1000)
}
//Stoppen oend.onclick=function(){
Intervall löschen(Timer);
alert('Herzlichen Glückwunsch zum Gewinn'+list[m]);
list.splice(m,1,'Danke');
}
</Skript>
</body>
</html>Klicken Sie auf die Schaltfläche „Start“:
Ergebnisse der Auslosung:
Sie können den Timer nach Belieben einstellen, also probieren Sie es jetzt aus! 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:
|
<<: So paginieren Sie schnell MySQL-Datenmengen im zweistelligen Millionenbereich
>>: So lösen Sie das Problem der hohen Parallelität in der MySQL-Datenbank
Artikel empfehlen
Vue + Express + Socket realisiert Chat-Funktion
In diesem Artikel wird der spezifische Code von V...
Lösung für den Fehler beim Mounten des freigegebenen Docker-Verzeichnisses unter Windows 10
Ursache Beim Ausführen des Docker-Skripts tritt e...
Detaillierte Erläuterung der JavaScript-Programmschleifenstruktur
Inhaltsverzeichnis Struktur auswählen Schleifenst...
MySQL-Beispiel für die Abfrage aller untergeordneten mehrstufigen Unterabteilungen basierend auf einer bestimmten Abteilungs-ID
Simulationstabellen und Datenskripte Kopieren Sie...
Beispielanalyse von MySQL-Start- und Verbindungsmethoden
Inhaltsverzeichnis So starten Sie mysqld Methode ...
Installieren Sie das komprimierte MySQL5.7-Paket schnell unter Windows
In diesem Artikel erfahren Sie, wie Sie das kompr...
Analyse von drei Parametern des MySQL-Replikationsproblems
Inhaltsverzeichnis 01 sql_slave_skip_counter-Para...
Natives JS zur Implementierung der Formularvalidierungsfunktion
Inhaltsverzeichnis Bei der Entwicklung kann eine ...
Detaillierte Erläuterung des MySQL-Trigger-Trigger-Beispiels
Inhaltsverzeichnis Was ist ein Auslöser Erstellen...
Referenzen und Referenzdetails in Vue3
Der Editor teilt Ihnen auch die entsprechenden Pr...
Reagieren Sie auf den nativen ScrollView-Pulldown-Aktualisierungseffekt
In diesem Artikel wird der spezifische Code des P...
Detaillierte Erläuterung des Bereitstellungsprozesses eines SpringBoot-Projekts über das Docker-Plugin in IDEA
1. Konfigurieren Sie den Docker-Remoteverbindungs...
Teilen Sie 6 Einladungscodes zur unbegrenzten Aktivierung von Alibaba Cloud Disk. Wenn Sie mir nicht glauben, können Sie Alibaba Cloud Disk aktivieren.
Das letzte Update von Alibaba Cloud Disk ist scho...
Detaillierte Erläuterung der Nginx-Optimierung in Szenarien mit hoher Parallelität
Bei täglichen Betriebs- und Wartungsarbeiten werd...
So installieren Sie Nginx in Docker
Installieren Sie Nginx auf Docker Nginx ist ein l...