Maison > développement back-end > tutoriel php > PHP+jQuery développe la fonction de loterie simple au flop (exemple de code)

PHP+jQuery développe la fonction de loterie simple au flop (exemple de code)

藏色散人
Libérer: 2023-04-08 10:50:01
avant
2614 Les gens l'ont consulté

PHP+jQuery développe la fonction de loterie simple au flop (exemple de code)

PHP+jQuery développe un exemple simple de loterie flop. Le processus de mise en œuvre : 6 carrés sont placés sur la page comme prix. Lorsque le gagnant de la loterie clique sur un certain carré, le carré se retourne. le dos pour afficher les informations gagnantes, ce prix est aléatoire, non fixe.

PHP+jQuery développe la fonction de loterie simple au flop (exemple de code)

Placez 6 récompenses sur la page :

<ul id="prize"> 
    <li class="red" title="点击抽奖">1</li> 
    <li class="green" title="点击抽奖">2</li> 
    <li class="blue" title="点击抽奖">3</li> 
    <li class="purple" title="点击抽奖">4</li> 
    <li class="olive" title="点击抽奖">5</li> 
    <li class="brown" title="点击抽奖">6</li> 
</ul>
Copier après la connexion

Cliquez sur chaque carré, l'événement s'est déclenché :

$("#prize li").each(function() { 
    var p = $(this); 
    var c = $(this).attr(&#39;class&#39;); 
    p.css("background-color", c); 
    p.click(function() { 
        $("#prize li").unbind(&#39;click&#39;); //连续翻动 
        $.getJSON("ajax.php", 
        function(json) { 
            var prize = json.yes; //抽中的奖项  
            p.flip({ 
                direction: &#39;rl&#39;, 
                //翻动的方向rl:right to left  
                content: prize, 
                //翻转后显示的内容即奖品  
                color: c, 
                //背景色  
                onEnd: function() { //翻转结束  
                    p.css({ 
                        "font-size": "22px", 
                        "line-height": "100px" 
                    }); 
                    p.attr("id", "r"); //标记中奖方块的id  
                    $("#viewother").show(); //显示查看其他按钮  
                    $("#prize li").unbind(&#39;click&#39;).css("cursor", "default").removeAttr("title"); 
                } 
            }); 
            $("#data").data("nolist", json.no); //保存未中奖信息  
        }); 
    }); 
});
Copier après la connexion

Retournez les autres carrés :

$("#viewother").click(function() { 
    var mydata = $("#data").data("nolist"); //获取数据  
    var mydata2 = eval(mydata); //通过eval()函数可以将JSON转换成数组  
    $("#prize li").not($(&#39;#r&#39;)[0]).each(function(index) { 
        var pr = $(this); 
        pr.flip({ 
            direction: &#39;bt&#39;, 
            color: &#39;lightgrey&#39;, 
            content: mydata2[index], 
            //奖品信息(未抽中)  
            onEnd: function() { 
                pr.css({ 
                    "font-size": "22px", 
                    "line-height": "100px", 
                    "color": "#333" 
                }); 
                $("#viewother").hide(); 
            } 
        }); 
    }); 
    $("#data").removeData("nolist"); 
});
Copier après la connexion

Pour plus de connaissances sur php, veuillez visiter le tutoriel php !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal