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.

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>

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

$("#prize li").each(function() { 
    var p = $(this); 
    var c = $(this).attr('class'); 
    p.css("background-color", c); 
    p.click(function() { 
        $("#prize li").unbind('click'); //连续翻动 
        $.getJSON("ajax.php", 
        function(json) { 
            var prize = json.yes; //抽中的奖项  
            p.flip({ 
                direction: 'rl', 
                //翻动的方向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('click').css("cursor", "default").removeAttr("title"); 
                } 
            }); 
            $("#data").data("nolist", json.no); //保存未中奖信息  
        }); 
    }); 
});

Retournez les autres carrés :

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

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!