suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery implementiert die einfache gemeinsame Nutzung von Lotteriespieltechnologien

jQuery implementiert die einfache gemeinsame Nutzung von Lotteriespieltechnologien

小云云
小云云Original
2018-01-12 11:36:281815Durchsuche

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>

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>

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>

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!

php mysql jquery css JS 算法 http
Stellungnahme：
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
Vorheriger Artikel：Detaillierte Erläuterung, wie Jquery den per Funk ausgewählten Wert erhältNächster Artikel：Detaillierte Erläuterung, wie Jquery den per Funk ausgewählten Wert erhält

In Verbindung stehende Artikel

Mehr sehen