jQuery幸运大转盘_jQuery+PHP抽奖程序

最新推荐文章于 2021-03-19 12:28:45 发布

Time，，

最新推荐文章于 2021-03-19 12:28:45 发布

阅读量1.1k

点赞数 1

分类专栏：前台页面 phone JQuery html php

php 同时被 3 个专栏收录

48 篇文章 0 订阅

订阅专栏

JQuery

8 篇文章 0 订阅

订阅专栏

前台页面

7 篇文章 0 订阅

订阅专栏

index.html

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./style/style.css" type="text/css" />
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript" src="./style/jquery.rotate.min.js"></script>
<script type="text/javascript" src="./style/jquery.easing.min.js"></script>
</head>
<body>
<div class="demo"> 
    <div id="disk"></div> 
    <div id="start"><img src="./img/start.png" id="startbtn"></div> 
</div> 

<script type="text/javascript"> 

$(function(){ 
    $("#startbtn").rotate({ 
        bind:{ 
            click:function(){//绑定click单击事件 
                 var a = Math.floor(Math.random() * 360); //生成随机数 
                 $(this).rotate({ 
                         duration:3000,//转动时间间隔（转动速度） 
                         angle: 0,  //开始角度 
                        animateTo:3600+a, //转动角度，10圈+ 
                        easing: $.easing.easeOutSine, //动画扩展 
                        callback: function(){ //回调函数 
                            alert('中奖了！'); 
                        } 
                 }); 
            } 
        } 
    }); 
}); 





$(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; 
                    } 
                } 
            }); 
        } 
    }); 
} 

</script>

</body>
</html>

style.css


.demo{width:417px; height:417px; position:relative; margin:50px auto}
#disk{width:417px; height:417px; background:url(../img/disk.jpg) no-repeat}
#start{width:163px; height:320px; position:absolute; top:46px; left:130px;}
#start img{cursor:pointer}

data.php

<?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) 
); 


	foreach ($prize_arr as $key => $val) { 
	    $arr[$val['id']] = $val['v']; 
	} 
	 
	$rid = getRand($arr); //根据概率获取奖项id 
	 
	$res = $prize_arr[$rid-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'] = $res['prize']; 
	 
	echo json_encode($result); 


function getRand($proArr) { 
    $result = ''; 
    //概率数组的总概率精度 
    $proSum = array_sum($proArr); 
    //概率数组循环 
    foreach ($proArr as $key => $proCur) { 
        $randNum = mt_rand(1, $proSum); 
        if ($randNum <= $proCur) { 
            $result = $key; 
            break; 
        } else { 
            $proSum -= $proCur; 
        } 
    } 
    unset ($proArr); 
    return $result; 
} 





?>

可修改为h5页面

原文可直接搜索《jQuery幸运大转盘_jQuery+PHP抽奖程序》

附件地址：