PHP+jQuery开发简单翻牌抽奖的功能(代码实例)
发布:smiling 来源: PHP粉丝网 添加日期:2022-05-29 08:50:18 浏览: 评论:0
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");
- });
Tags: PHP+jQuery翻牌抽奖
- 上一篇:分析PHP错误处理(核心特性)
- 下一篇:最后一页
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)