头像

幸运大转盘-jQuery+PHP实现的抽奖程序

来源:https://www.daimasucai.com/draw/81.html 代码素材管理员 2016-12-26浏览()

使用PHP结合jQuery完成整个转盘抽奖过程。我们只需要在php文件中设置转盘对应的角度和奖项,以及每个奖项对应的中奖几率,运用概率算法,使得抽奖结果符合后台设置的中奖几率。

程序员,你不是一个人;网站开发QQ群:  在线充值,或联系QQ 3078847178直接充值

幸运大转盘-jQuery+PHP实现的抽奖程序
分类:首页>>PHP/Mysql>>抽奖 阅读次数:
查看演示 下载次数: 4

手机扫码访问:

下载资源 下载积分: 30

  PHP

  首先,我们根据抽奖圆盘上的奖项设置对应角度和中奖几率,我们在data.php中构建一个多维数组:

$prize_arr = array( 

    '0' => array('id'=>1,'min'=>1,'max'=>29,'prize'=>'一等奖','v'=>1), 

    '1' => array('id'=>2,'min'=>302,'max'=>328,'prize'=>'二等奖','v'=>2), 

    '2' => array('id'=>3,'min'=>242,'max'=>268,'prize'=>'三等奖','v'=>5), 

    '3' => array('id'=>4,'min'=>182,'max'=>208,'prize'=>'四等奖','v'=>7), 

    '4' => array('id'=>5,'min'=>122,'max'=>148,'prize'=>'五等奖','v'=>10), 

    '5' => array('id'=>6,'min'=>62,'max'=>88,'prize'=>'六等奖','v'=>25), 

    '6' => array('id'=>7,'min'=>array(32,92,152,212,272,332), 

'max'=>array(58,118,178,238,298,358),'prize'=>'七等奖','v'=>50) 

); 

  数组$prize_arr,id用来标识不同的奖项,min表示圆盘中各奖项区间对应的最小角度,max表示最大角度,如一等奖对应的最小角度:0,最大角度30,这里我们设置max值为1、max值为29,是为了避免抽奖后指针指向两个相邻奖项的中线。由于圆盘中设置了多个七等奖,所以我们在数组中设置每个七等奖对应的角度范围。prize表示奖项内容,v表示中奖几率,我们会发现,数组中七个奖项的v的总和为100,如果v的值为1,则代表中奖几率为1%,依此类推。

  jQuery

  在上文的基础上,我们对前端jQuery代码进行改造,当点击“开始抽奖”按钮后,向后台data.php发送一个ajax请求,如果请求成功并返回奖项信息,则转动指针,将指针最终指向位置转动到data.php返回的角度值。

$(function(){ 

     $("#startbtn").click(function(){ 

        lottery(); 

    }); 

}); 

function lottery(){ 

    $.ajax({ 

        type: 'POST', 

        url: 'data.php', 

        dataType: 'json', 

        cache: false, 

        error: function(){ 

            alert('出错了!'); 

            return false; 

        }, 

        success:function(json){ 

            $("#startbtn").unbind('click').css("cursor","default"); 

            var a = json.angle; //角度 

            var p = json.prize; //奖项 

            $("#startbtn").rotate({ 

                duration:3000, //转动时间 

                angle: 0, 

                animateTo:1800+a, //转动角度 

                easing: $.easing.easeOutSine, 

                callback: function(){ 

                    var con = confirm('恭喜你,中得'+p+'\n还要再来一次吗?'); 

                    if(con){ 

                        lottery(); 

                    }else{ 

                        return false; 

                    } 

                } 

            }); 

        } 

    }); 

  我们构建自定义函数lottery(),在lottery()我们向data.php发送一个POST请求,如果成功返回中奖信息后,调用rotate插件开始转动,转动角度由后台返回的角度决定,这里我们用1800+a表示转动的角度,即指针转动6圈+a度后停止,然后我们在单击“开始抽奖”按钮时调用lottery(),于是转盘抽奖就完成。


声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:https://www.daimasucai.com/draw/81.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>