Home > Backend Development > PHP Tutorial > PHP+jQuery develops the function of simple card flop lottery (code example)

PHP+jQuery develops the function of simple card flop lottery (code example)

藏色散人
Release: 2023-04-08 10:50:01
forward
2753 people have browsed it

PHP+jQuery develops the function of simple card flop lottery (code example)

PHP jQuery develops a simple example of flip card lottery. The implementation process is as follows: 6 squares are placed on the page as prizes. When the lottery winner clicks on a certain square, the square flips to the back to display the winning information. This prize is random and not fixed.

PHP+jQuery develops the function of simple card flop lottery (code example)

Place 6 awards on the 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>
Copy after login

Click each square, the event triggered:

$("#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); //保存未中奖信息  
        }); 
    }); 
});
Copy after login

Turn over other squares :

$("#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"); 
});
Copy after login

For more related php knowledge, please visit php tutorial!

The above is the detailed content of PHP+jQuery develops the function of simple card flop lottery (code example). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Issues
php data acquisition?
From 1970-01-01 08:00:00
0
0
0
PHP extension intl
From 1970-01-01 08:00:00
0
0
0
How to learn php well
From 1970-01-01 08:00:00
0
0
0
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template