PHP+jQuery开发简略的翻牌抽奖实例,完成流程:页面搁置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到反面,显示中奖信息,这个奖品是随机的,没有是固定的。
正在页面上搁置6个奖项:
<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>
点击每一个方块,触发的事情:
$("#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); //保留未中奖信息 }); }); });
掀开其余方块:
$("#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"); });
更多相干php常识,请拜访php教程!
以上就是PHP+jQuery开发简略翻牌抽奖的性能(代码实例)的具体内容,更多请存眷资源魔其它相干文章!
标签: php php开发教程 php开发资料 php开发自学 jQuery
版权声明:除非特别标注,否则均为本站原创文章,转载时请以链接形式注明文章出处。
抱歉,评论功能暂时关闭!