Maison > php教程 > php手册 > php+jQuery实现网络转盘抽奖

php+jQuery实现网络转盘抽奖

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2016-06-06 19:58:15
original
951 Les gens l'ont consulté

最近公司在搞节日活动,进行抽奖活动,无奈奖品很诱人,但是都是摆设,在网上找了一下,又加上自己的改进 1.新建一个html页面,css样式,布局啥的,网上down的图片 !DOCTYPE HTMLhtmlheadmeta charset=utf-8meta name=keywords content=jquery/meta name=des

最近公司在搞节日活动,进行抽奖活动,无奈奖品很诱人,但是都是摆设,在网上找了一下,又加上自己的改进


php+jQuery实现网络转盘抽奖

1.新建一个html页面,css样式,布局啥的,网上down的图片

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

        <meta charset="utf-8">

        <meta name="keywords" content="jquery">

        <meta name="description" content="抽奖大转盘">

        <title>PHP+JQUERY实现抽奖大转盘</title>

        <script type="text/javascript" src="../../../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="jQueryRotate.2.2.js"></script>

<script type="text/javascript" src="jquery.easing.min.js"></script>

        <style type="text/css">

                .demo{width:417px;height:417px;position:relative;margin:50px auto}

                #disk{width:417px;height:417px;background:url(disk.jpg) no-repeat;}

                #start{width:163px;height:320px;position:absolute;top:46px;left:130px;}

                #start img{cursor:pointer}

        </style>

        <script type="text/javascript">

                $(function(){

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

                                lottery();

                        });

                });

                function lottery(){

                        $.ajax({

                            type:&#39;POST&#39;,

                            url:&#39;data.php&#39;,

                            dataType:&#39;json&#39;,

                            cache:false,

                            error:function(){

                                alert(&#39;出错啦!&#39;);

                                return false;

                            },

                            success:function(json){

                                    $("#startbtn").unbind(&#39;click&#39;).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(&#39;恭喜你,中得&#39;+p+&#39;\n还要再来一次吗?&#39;);

                                            if(con){

                                                lottery();

                                            }else{

                                                return false;

                                            }

                                        }

                                    });

                                }

                            });

                }

        </script>

 

 

        <div class="demo">

                <div id="disk"></div>

                <div id="start"><img  src="/static/imghw/default1.png" data-src="start.png" class="lazy" id="startbtn" alt="php+jQuery实现网络转盘抽奖" ></div>

        </div>

Copier après la connexion

2.php程序处理页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<?php $prize_arr=array(

        &#39;0&#39;=>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)

);

 

//概率函数

function getRand($proArr) {

    $result = '';

     //概率数组的总概率精度

    $proSum = array_sum($proArr);

     //概率数组循环

    foreach ($proArr as $key => $proCur) {

        $randNum = mt_rand(1, $proSum);

        if ($randNum $val){

        $arr[$val['id']]=$val['v'];

}

$id=getRand($arr);//根据概率获取奖项id

$res=$prize_arr[$id-1];

 

$min=$res['min'];

$max=$res['max'];

 

if($res['id']==7){

        $i=mt_rand(0,5);

        $result['angle']=mt_rand($min[$i],$max[$i]);

}else{

        $result['angle']=mt_rand($min,$max);

}

$result['prize']=iconv('gb2312','UTF-8',$res['prize']);

echo json_encode($result);

exit;

?>

Copier après la connexion


Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers numéros
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal