Heim Web-Frontend js-Tutorial jQuery implementiert die einfache gemeinsame Nutzung von Lotteriespieltechnologien

jQuery implementiert die einfache gemeinsame Nutzung von Lotteriespieltechnologien

Jan 12, 2018 am 11:36 AM
jquery 抽奖 游戏

In diesem Artikel wird hauptsächlich die Implementierung eines einfachen Lotteriespiels im Detail vorgestellt. Interessierte Freunde können darauf verweisen.

Was ich heute schreiben werde, ist, mit jQuery einen Lotteriefall zu schreiben. Die Seite enthält vier Komponenten, und die beiden Schaltflächen sind Start- und Stoppschaltflächen. In zwei Kisten sind jeweils Personen und Preise untergebracht. Wenn auf den Startknopf geklickt wird, wechseln die Leute weiter. Die wartenden Lotterieergebnisse werden in der Lotteriebox angezeigt. Wenn die Stopp-Taste gedrückt wird, werden in den beiden Feldern jeweils der Name der Person und der gewonnene Preis angezeigt. Die Darstellung der

-Seite ist wie folgt:

jQuery implementiert die einfache gemeinsame Nutzung von Lotteriespieltechnologien

Vielleicht ist die Seite nicht so schön. Was wir hauptsächlich implementieren, ist die Funktion

Definieren Sie zuerst die Komponente im Körper


<body>
<input type = "button" class = "btn" id = "start" value = "开始">
<input type = "button" class = "btn" id = "stop" value = "停止">

<p id = "number" class = "box1"></p>
<p id = "jiangpin" class = "box2"></p>
</body>
Nach dem Login kopieren

und legen Sie dann den Stil fest:

CSS-Code:


<style type="text/css">
 *{
 margin: 0px;
 padding: 0px;
 }
 .btn{
 width: 90px;
 height: 40px;
 background-color: lightgreen;
 color: white;
 font-size: 18px;
 font-family: "微软雅黑";
 text-align: center;
 line-height: 40px;

 }
 .box1{
 position: absolute;
 width: 230px;
 height: 100px;
 margin: 10px 50px;
 top:150px;
 left: 60%;
 background-color: gold;
 color: black;
 border-radius: 8%;
 font-size: 30px;
 text-align: center;
 line-height: 100px;
 }
 .box2{
 position: absolute;
 width: 230px;
 height: 100px;
 margin: 10px 50px;
 top: 300px;
 left: 60%;
 background-color: gold;
 color: black;
 border-radius: 8%;
 font-size: 30px;
 text-align: center;
 line-height: 100px;
 }
 </style>
Nach dem Login kopieren

Der nächste Schritt besteht darin, die Funktion zu schreiben. Was ich hier zitiere, ist die jQuery-Bibliothek von „http://libs.baidu.com/jquery/1.9.0/jquery.js“.


<script >
$(document).ready(function(){

// 1. 首先第一步定义两个数组,存放人员和奖品

var list1 = [ &#39;A君&#39; , &#39; B君 &#39; , &#39; C君 &#39; , &#39; D君 &#39;, &#39; E君 &#39; , &#39; F君 &#39; , &#39; G君 &#39;];
var list2 = [&#39;YSL&#39;, &#39; iphone7&#39;, &#39; iphone6&#39;, &#39; 手表&#39;, &#39; 小红花&#39;, &#39; 谢谢参与&#39;,&#39; 谢谢参与&#39;,&#39; 谢谢参与&#39;];


// 2. 为开始按钮绑定点击事件

$("#start").click(function(){
 //2.1 先将奖品的盒子中的内容初始化
 $("#jiangpin").html("等待抽奖中...");

 //2.2 利用setInterval()函数进行人员名字切换
 // 定义一个变量去接受它每次的状态
 functionId = setInterval(function(){
 var n = Math.floor(Math.random() * list1.length);
 $("#number").html(list1[n]);
 },30);

 });

// 3. 为停止按钮绑定点击事件
 $("#stop").click(function(){
 // 3.1 清除setInterval()。并停止在最后一次的人员名上
 clearInterval(functionId);
 // 3.2 随机产生奖品数组的下标,并将下标对应的元素写入奖品区
 var jiang = Math.floor(Math.random() * list2.length);
 $("#jiangpin").html(list2[jiang]);
 });
})
</script>
Nach dem Login kopieren

Dieser Fall ist relativ einfach, daher werde ich nicht auf Details eingehen. Die endgültige Darstellung ist unten angehängt:

Dies ist nach dem Klicken Wenn Sie den Startknopf drücken, wechseln die Personennamen schnell:

jQuery implementiert die einfache gemeinsame Nutzung von Lotteriespieltechnologien

Das Folgende ist der endgültige Gewinner, der auf den Stoppknopf und den entsprechenden Preis geklickt hat

jQuery implementiert die einfache gemeinsame Nutzung von Lotteriespieltechnologien

jQuery implementiert die einfache gemeinsame Nutzung von Lotteriespieltechnologien

Verwandte Empfehlungen:

Beispiel für das von jQuery+PHP implementierte Würfellotteriespiel, jquery dice_ PHP-Tutorial

JS-Implementierungsmethode für ein digitales Lotteriespiel_Javascript-Fähigkeiten

JS-Implementierung des großen Karussell-Lotteriespiels Beispiel_Javascript-Fähigkeiten

JQuery, PHP, MySQL-Implementierung von Beispielen für Lotterieprogramme, detaillierte Erklärung

Wie PHP die Algorithmusberechnung eines Beispiels für die Verteilung von Lotteriewahrscheinlichkeiten implementiert

Das obige ist der detaillierte Inhalt vonjQuery implementiert die einfache gemeinsame Nutzung von Lotteriespieltechnologien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Nvgpucomp64.dll führt zum Absturz von Windows-PC-Spielen; Nvgpucomp64.dll führt zum Absturz von Windows-PC-Spielen; Mar 26, 2024 am 08:20 AM

Wenn Nvgpucomp64.dll dazu führt, dass Ihr Spiel häufig abstürzt, können Ihnen die hier bereitgestellten Lösungen helfen. Dieses Problem wird normalerweise durch veraltete oder beschädigte Grafikkartentreiber, beschädigte Spieledateien usw. verursacht. Das Beheben dieser Probleme kann Ihnen dabei helfen, Spielabstürze zu beheben. Die Datei Nvgpucomp64.dll ist mit NVIDIA-Grafikkarten verknüpft. Wenn diese Datei abstürzt, stürzt auch Ihr Spiel ab. Dies geschieht normalerweise in Spielen wie LordsoftheFallen, LiesofP, RocketLeague und ApexLegends. Nvgpucomp64.dll stürzt Spiele auf Windows-PCs ab, wenn N

Einführung in das Herunterladen und Installieren des Superpeople-Spiels Einführung in das Herunterladen und Installieren des Superpeople-Spiels Mar 30, 2024 pm 04:01 PM

Das Superpeople-Spiel kann über den Steam-Client heruntergeladen werden. Die Größe dieses Spiels beträgt normalerweise eineinhalb Stunden. Hier ist ein spezielles Download- und Installations-Tutorial. Neue Methode zur Beantragung globaler geschlossener Tests 1) Suchen Sie nach „SUPERPEOPLE“ im Steam-Store (Steam-Client-Download) 2) Klicken Sie unten auf der „SUPERPEOPLE“-Store-Seite auf „Zugriff auf geschlossene SUPERPEOPLE-Tests anfordern“ 3) Nachdem Sie auf geklickt haben Schaltfläche „Zugriff anfordern“. Das Spiel „SUPERPEOPLECBT“ kann in der Steam-Bibliothek bestätigt werden. 4) Klicken Sie auf die Schaltfläche „Installieren“ in „SUPERPEOPLECBT“ und laden Sie es herunter

Wo ist Spider Solitaire in Win11? Wie spielt man das Spider Solitaire-Spiel in Win11? Wo ist Spider Solitaire in Win11? Wie spielt man das Spider Solitaire-Spiel in Win11? Mar 01, 2024 am 11:37 AM

Freunde, die genug AAA-Meisterwerke und Handyspiele gespielt haben, möchten Sie die Computerspiele Ihrer Kindheit noch einmal erleben? Dann lasst uns gemeinsam nach Spider Solitaire in Windows 11 suchen! Klicken Sie auf der Benutzeroberfläche auf das Startmenü und dann auf die Schaltfläche „Alle Apps“. Suchen und wählen Sie „MicrosoftSolitaireCollection“, die Spieleanwendung der Solitaire-Serie von Microsoft. Nachdem der Ladevorgang abgeschlossen ist, rufen Sie die Auswahloberfläche auf und suchen Sie nach „Spider Solitaire“. Wählen Sie „Spider Solitaire“. Obwohl sich die Benutzeroberfläche geringfügig geändert hat, ist sie immer noch dieselbe wie zuvor

ASUS veröffentlicht BIOS-Update zur Verbesserung der Spielestabilität auf Intels Prozessoren der 13./14. Generation ASUS veröffentlicht BIOS-Update zur Verbesserung der Spielestabilität auf Intels Prozessoren der 13./14. Generation Apr 20, 2024 pm 05:01 PM

Laut Nachrichten dieser Website vom 20. April hat ASUS kürzlich ein BIOS-Update veröffentlicht, das Instabilitäten wie Abstürze beim Ausführen von Spielen auf Intel-Prozessoren der 13./14. Generation verbessert. Diese Seite berichtete zuvor, dass Spieler Probleme gemeldet hätten, unter anderem, dass beim Ausführen der PC-Demoversion von Bandai Namcos Kampfspiel „Tekken 8“ das System abstürzte und eine Fehlermeldung über unzureichenden Speicher ausgab, selbst wenn der Computer über ausreichend Arbeits- und Videospeicher verfügte. Ähnliche Absturzprobleme traten auch in vielen Spielen wie „Battlefield 2042“, „Remnant 2“, „Fortnite“, „Lord of the Fallen“, „Hogwarts Legacy“ und „The Finals“ auf. RAD veröffentlichte im Februar dieses Jahres einen langen Artikel, in dem erklärt wurde, dass das Spielabsturzproblem eine Kombination aus BIOS-Einstellungen, hoher Taktfrequenz und hohem Stromverbrauch von Intel-Prozessoren ist.

So deaktivieren Sie die Eingabemethode beim Spielen von Spielen unter Win11 So deaktivieren Sie die Eingabemethode beim Spielen von Spielen unter Win11 Mar 15, 2024 pm 02:40 PM

Kürzlich haben einige Freunde berichtet, dass sie beim Spielen häufig die Eingabemethode drücken, was das Spielerlebnis stark beeinträchtigt. Hier gebe ich Ihnen eine detaillierte Einführung in die Methode zum Deaktivieren der Eingabemethode beim Spielen in Win11 Freunde können vorbeikommen und einen Blick darauf werfen. Methode deaktivieren: 1. Klicken Sie mit der rechten Maustaste auf das Eingabemethodensymbol in der Taskleiste in der unteren rechten Ecke und wählen Sie „Spracheinstellungen“ in der Liste aus. 2. Nachdem Sie die neue Benutzeroberfläche aufgerufen haben, klicken Sie auf die Option „Bevorzugte Sprache hinzufügen“. 3. Wählen Sie im Popup-Fenster „Englisch (USA)“ aus. 4. Klicken Sie erneut auf „Weiter“. 5. Wählen Sie dann, ob Sie einige Optionen entsprechend Ihren Anforderungen installieren möchten. 6. Klicken Sie dann auf „Installieren“ und warten Sie, bis die Installation abgeschlossen ist. 7. Klicken Sie dann auf die Statusleiste der Eingabemethode in der unteren rechten Ecke und wählen Sie „Englisch (

Der Update-Code „No Man's Sky' ebnete den Weg für die PS5 Pro und „überraschte' den Entwicklungscodenamen der Spielekonsole „Trinity' und die Konfigurationsdatei für die Bildqualität Der Update-Code „No Man's Sky' ebnete den Weg für die PS5 Pro und „überraschte' den Entwicklungscodenamen der Spielekonsole „Trinity' und die Konfigurationsdatei für die Bildqualität Jul 22, 2024 pm 01:10 PM

Laut Nachrichten dieser Website vom 22. Juli entdeckten ausländische Medien, Twistedvoxel, den gemunkelten PS5-Entwicklungscodenamen „Trinity“ und zugehörige Konfigurationsdateien für die Bildqualität im neuesten „World Part 1“-Updatecode von „No Man’s Sky“, was beweist, dass Sony es ist voraussichtlich Das PS5Pro-Modell wurde kürzlich auf den Markt gebracht. Obwohl „No Man’s Sky“ in den letzten Updates die Grafikleistung des Spiels verbessert hat, glauben viele Spieler immer noch, dass HelloGames den Weg für neue Modelle ebnen könnte. Laut den neuesten Grafikvoreinstellungen wird die dynamische Auflösung des Spiels unter PS5 Pro steigen Die Skalierung wurde von 0,6 auf 0,8 erhöht, was bedeutet, dass das Spiel eine höhere durchschnittliche Auflösung hat und einige grafische Details von „Hoch“ auf „Ultra“ angehoben wurden, aber seit jedem Spiel

So erstellen Sie ein Excel-Lotterie-Applet So erstellen Sie ein Excel-Lotterie-Applet Mar 20, 2024 am 11:40 AM

Bei der täglichen Arbeit stoßen wir auf viele Dinge, die das Auslosen von Zahlen erfordern. Mit der Entwicklung elektronischer Software können wir die Lektion, die ich mit Ihnen teilen möchte, nutzen Heute erfahren Sie, wie Sie ein Excel-Lotterie-Applet erstellen. 1. Zuerst öffnen wir die Excel-Software und öffnen die von uns vorbereitete Tabelle. Die Tabelle muss unsere Namen enthalten. 2. Dann führen wir die Zellen auf der rechten Seite zusammen, füllen Schwarz aus, wer heute Abend Glück hat, und fügen die Zellen darunter zusammen und füllen Rot aus, wie in der Abbildung unten gezeigt. 3. Dann geben wir die Randbetween-Funktion in den roten Bereich ein und setzen die erste Zeile auf 2 und die letzte Zeile auf 7, wie in der Abbildung unten gezeigt. 4. Dann geben wir vorne ind ein

Erklärung zum Aktivieren der Mikrofonberechtigung für Apple-Handyspiele Erklärung zum Aktivieren der Mikrofonberechtigung für Apple-Handyspiele Mar 22, 2024 pm 05:56 PM

1. Klicken Sie in den Telefoneinstellungen auf [Datenschutz]. 2. Klicken Sie auf die Option [Mikrofon]. 3. Schalten Sie den Schalter auf der rechten Seite der Spielanwendung ein, der das Festlegen von Mikrofonberechtigungen erfordert.

See all articles