jQuery + h5 realisiert den Spezialeffekt der Neun-Quadrate-Lotterie (Front-End- und Back-End-Code)

Vorwort:

Frontend: jq+h5, um den dynamischen Neun-Raster-Effekt zu erzielen

Backend: thinkphp3.2.3 implementiert den Gewinnwahrscheinlichkeitsalgorithmus

Funktion: Unterstützt das Lesen der in der Datenbank voreingestellten Gewinnrate und des Preispools. Die Gewinnrate kann angepasst werden und muss eine Ganzzahl sein

Der endgültige Effekt ist wie folgt:

Code:

Der Code von choujiang.html lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<meta name="author" content="Taoist vom Berg Wudang" />
<title>Drehscheibe für Glücksziehung mit neun Feldern</title>
<style type="text/css">
.container{width:100%;height:auto;line-height: 100%;text-align: center;}
#lotterie{width:425px;height:425px;margin:auto;background:#e5e5e5;}
#Lotterietabelle td{width:142px;height:142px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999;
 
}
/*#Lotterietabelle td a{width:284px;height:284px;line-height:150px;display:block;text-decoration:none;}*/
#Lotterietabelle td.active{background-color:#fff333;border-radius: 10px;}

#start {Farbe:weiß;Hintergrund:orange;
 Rahmenradius: 10px;
 Höhe: 130px;
 Zeilenhöhe: 130px;
 Breite: 130px;
 Rand: automatisch;
 /*Marge: 10 % 10 % 10 % 10 %;*/
 Textausrichtung: zentriert;
 Anzeige: Block;
 Textdekoration: keine;
}
#con_prize{Anzeige: keine;oberer Rand: 10px;}
#pname{Farbe:rot;Rand links: 5px;Rand rechts: 10px;Schriftgröße: 20px;}
.prize{Hintergrund:#000 ;Deckkraft: 0,5;
 Höhe: 130px; Breite: 130px;
 Rahmenradius: 5px; Rand: automatisch; Zeilenhöhe: 130px;
 Textschatten: 1px 1px 2px;
}
.auf{Deckkraft: 1;Farbe:#fff;Hintergrund: #a5a5d1}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
 <div id="Lotterie">
     <table border="0" cellpadding="0" cellspacing="0" style="background:#e3f4a1">
         <tr>
             <td class="lottery-unit lottery-unit-0"><div class="prize prize-0">Trostpreis</div></td>
             <td class="lottery-unit lottery-unit-1"><div class="prize prize-1">Spielzeugauto</div></td>
             <td class="lottery-unit lottery-unit-2"><div class="prize prize-2">Fahrrad</div></td>
         </tr>
         <tr>
             <td class="lottery-unit lottery-unit-7"><div class="Preis Preis-7">Audi</div></td>
             <td ><a href="#" rel="external nofollow" class = "lottery-unit" id="start">Lotterie starten</a></td>
             <td class="lottery-unit lottery-unit-3"><div class="prize prize-3">Elektrofahrzeug</div></td>
         </tr>
         <tr>
             <td class="lottery-unit lottery-unit-6"><div class="Preis Preis-6">Xia Li</div></td>
             <td class="lottery-unit lottery-unit-5"><div class="prize prize-5">Traktor</div></td>
             <td class="lottery-unit lottery-unit-4"><div class="prize prize-4">Motorrad</div></td>
         </tr>
     </Tabelle>
 </div>
 <div id="con_prize" data-pname="Changyi Taisheng 100 Yuan-Gutschein" data-pid="1">Herzlichen Glückwunsch zum Gewinn: <span id="pname"></span><button onclick="getPrize()">Holen Sie sich den Preis</button></div>
</div>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<Skripttyp="text/javascript">


        var Lotterie = {
                index:-1, //Aktuelle Rotationsposition, Startposition count:8, //Wie viele Gewinnpositionen gibt es insgesamt? Ein 9-Quadrate-Raster bedeutet 8 Gewinnpositionen timer:0, //setTimeout ID, löschen mit clearTimeout speed:10, //Anfängliche Rotationsgeschwindigkeit times:0, //Anzahl der Rotationen cycle:50, //Grundrotationszeiten: wie oft Sie mindestens rotieren müssen, bevor Sie den Lotteriegewinn erzielen prize:0, //Standardgewinnposition, setzen Sie den Standardpreis init:function(id){
                        wenn ($("#"+id).find(".lottery-unit").Länge>0) {
                                $lotterie = $("#"+id);
                                $units = $lottery.find(".lottery-unit");
                                dieses.obj = $lotterie;
                                diese.Anzahl = $Einheiten.Länge;
                                $lottery.find(".prize-"+this.index).addClass("on");
                        };
                },
                rollen:funktion(){
                        var index = dieser.index;
                        var Anzahl = diese.Anzahl;
                        var Lotterie = dieses.obj;
                        $(lottery).find(".prize-"+index).removeClass("on");
                        Index += 1;
                        wenn (Index>Anzahl-1) {
                            Index = 0;
                        };
                        $(lottery).find(".prize-"+index).addClass("on");
                        dies.index=index;
                        gibt false zurück;
                    },
               Stopp:Funktion(Index){
                        dieser.Preis=Index;
                        gibt false zurück;
                    }
        };

        //Preisinformationen speichern var prize_data = {
         pname:'Standardpreis', //Preisname pnum:0, //Gewinnposition ist standardmäßig 0, wichtig, der Drehtisch verwendet dies, um das Gewinnerprodukt zu lokalisieren pid:1, //Preis-ID ist standardmäßig 1
        };

        
        Funktion rollen(){
            lotterie.mal += 1;
            lotterie.roll();
            
            wenn (Lotterie.Zeiten > Lotterie.Zyklus+10 und Lotterie.Preis==Lotterie.Index) {
                Zeitüberschreitung löschen(Lotterie.Timer);
                Lotterie.Zeiten=0;
                Klick=falsch;
                //Gewinnerinformationen anzeigenshowDetail();
            }anders{
             //Geschwindigkeitskontrolle if (lottery.times<lottery.cycle) {
                    Lotterie.Geschwindigkeit -= 10;
                }sonst wenn(lottery.times==lottery.cycle) {
                    index = Lotteriepreis;     
                }anders{
                    wenn (Lotterie.Zeiten > Lotterie.Zyklus+10 && ((Lotterie.Preis==0 && Lotterie.Index==7) || Lotterie.Preis==Lotterie.Index+1)) {
                        Lotterie.Geschwindigkeit += 110;
                    }anders{
                        Lotterie.Geschwindigkeit += 20;
                    }
                }
                wenn (Lotterie.Geschwindigkeit<40) {
                    Lotterie.Geschwindigkeit=40;
                };
                //Verzögerter rekursiver Aufruf lottery.timer = setTimeout(roll,lottery.speed);
                
            }
            
            gibt false zurück;
        }
        /*
   * Holen Sie sich die Gewinnposition * @param {string} name Benutzer-Spitzname (erforderlich)
   * @param {string} Avatar WeChat Avatar-URL (erforderlich)
   * @param {string} openid WeChat OpenID (erforderlich, wird zur Überprüfung der Eindeutigkeit verwendet, ein Benutzer kann nur einmal zeichnen)
   * @return {bool} 
   */
  Funktion doRoll(URL,Name,Avatar,OpenID){
   $.ajax({ url: url, data:{name:name,avatar:avatar,openid:openid}, async:false,dataType:'json',success: function(rst){
    Lotterie.Geschwindigkeit=100;
          var Daten = erste Daten;
          
          Lotteriepreis = Daten.Pnum;
          Preisdaten = {
                  pname:Daten.pname,
                  pnum:Daten.pnum,
                  pid:Daten.pid
                 };
                rollen();
                Klick=wahr;
                gibt false zurück;

        }});
  }

        //Gewinn erhalten (zur Seite mit der Lieferadresse springen oder Seite mit der Lieferadresse aufrufen)
        Funktion getPrize(){
         alert("Bitte geben Sie die Lieferadresse ein");
        }
        // Löschen der Gewinninformationen Funktion clearDetail(){
         $("#con_prize").hide();
            $("#pname").html("");
        }
        //Gewinnerinformationen anzeigen function showDetail(){
         $("#con_prize").anzeigen();
            $("#pname").html(Preisdaten.pname);
        }

        var Klick=false;

        fenster.funktion(){
         var url = 'http://test.com/api/Shop/ex/'; //Wechseln Sie hier zur eigentlichen Lotterie-Hintergrundschnittstelle lottery.init('lottery');
            $("#start").klick(function(){
                wenn (klicken) {
                    gibt false zurück;
                }anders{
                 Details löschen();
                 doRoll(URL,"Name","Avatar","OpenID");
                }
            });
        };

</Skript>
</body>
</html>

Der Thinkphp-Schnittstellencode lautet wie folgt:

Namespace API\Controller;
verwenden Sie Think\Controller;
Klasse ShopController erweitert Controller {
 /**
     * Lotterie-Backend-Schnittstelle* @author Wudang Mountain Taoist*/
    
     öffentliche Funktion ex(){
        $nick = I('nick','','trim');
        $avatar = I('Avatar','','trimmen');
        $openid = I('openid','','trim');
        //wenn(leer($nick)) $this->error('leerer Nick');
        //wenn(leer($avatar)) $this->error('leerer Avatar');
        //wenn(leer($openid)) $this->error('leere openid');
        /*Die Fehlerfunktion, die Sie selbst kapseln, sollte normalerweise so geschrieben werden:
        $this->ajaxReturn(Array(
          'Daten'=>'',
          'info'=>$info,
          'status'=>$status
         ));*/
         
        //Preispool initialisieren, 8 Preise, Gesamtwahrscheinlichkeit 100, Mindestwahrscheinlichkeit 1 (ID, Name basieren auf den aus der aktuellen Datenbank abgerufenen Daten und die Prozentsumme ergibt 100)
        $arr8 = Array(
            Array("id"=>1,"name"=>"Trostpreis","Prozent"=>69),
            Array("id"=>2,"name"=>"Spielzeugauto","Prozent"=>10),
            Array("id"=>3,"name"=>"Fahrrad","Prozent"=>6),
            Array("id"=>4,"name"=>"Elektrofahrzeug","Prozent"=>5),
            Array("id"=>5,"name"=>"Motorrad","Prozent"=>4),
            Array("id"=>6,"name"=>"Traktor","Prozent"=>3),
            Array("id"=>7,"name"=>"Xia Li","Prozent"=>2),
            Array("id"=>8,"name"=>"Audi","Prozent"=>1),
            );
        //100 Index-Speicherarrays, 0-7 werden entsprechend der Wahrscheinlichkeit entsprechende Mengen zugewiesen $indexArr = array();
        für($i=0;$i<sizeof($arr8);$i++){
            für($j=0;$j<$arr8[$i]['Prozent'];$j++){
                //Index an Array indexArr angehängt
                array_push($indexArr, $i);
            }
        }
        //Array-Shuffle($indexArr);
        //Wählen Sie zufällig einen Index aus dem Index-Array als Gewinnerindex aus. $rand_index ist der Index des zufälligen Elements von $indexArr (0-99).
        $rand_index = array_rand($indexArr,1);
        //Gewinninformationen abrufen$prize_index = $indexArr[$rand_index];
        $prizeInfo = $arr8[$prize_index];

        
        $data['pnum'] = $prize_index; //Entsprechende Front-End-Preisnummer $data['pid'] = $prizeInfo['id'];
        $data['pname'] = $prizeInfo['name'];
        $this->success($data);/*Selbstgekapselter Erfolg, normalerweise sollte es so geschrieben werden $this->ajaxReturn(array(
          'Daten'=>$Daten,
          'info'=>'Erfolg',
          'Status' => 1
         ));*/
    }
    
}

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: