JQ+Php实现抽奖大转盘

最新推荐文章于 2021-06-07 12:01:26 发布

zhabao123456

最新推荐文章于 2021-06-07 12:01:26 发布

阅读量1.1k

点赞数 2

分类专栏： php 文章标签：大转盘抽奖 php

本文链接：https://blog.csdn.net/zhabao123456/article/details/49359845

版权

php 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

本文介绍利用JQ+php实现大转盘的效果。

原理：前端ajax -> php（算法）得出奖品 --》JQ（ajax）根据奖品显示给用户相应的奖品

1.前端页面 js插件可以网上找一下

<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>转盘抽奖</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/Rotate.js"></script>
<style>
*{padding:0; margin:0;}
.lotteryMain{ width:100%; padding:20px 0; }
.lotteryBg{ width:520px; height:520px; margin:0 auto; background:url(images/lotteryBg.jpg) no-repeat; position:relative; overflow:hidden;}
#run{ width:153px; height:214px; position:absolute; left:50%; top:50%;  margin-left:-76px; margin-top:-107px; z-index:1; transform:rotate(0deg); -ms-transform:rotate(0deg); }
#btn_run{ width:125px; height:125px; background:url(images/btn_start.png) no-repeat; border:none; outline:none; position:absolute; left:50%; top:50%; margin-left:-62px; margin-top:-62px; z-index:2;cursor:pointer;}
</style>
</head>

<body>
<section class="lotteryMain">
	<div class="lotteryBg">
    	<img id="run" src="images/start.png" />
        <input id="btn_run" type="button" value="" />
    </div>
</section>  
<script>
$(function(){ 
     $("#btn_run").click(function(){
		$("#btn_run").attr('disabled',true).css("cursor","default");        
        lottery(); 
    });
}); 
function lottery(){ 
    $.ajax({ 
        type: 'get', 
        url: 'json.php', 
        dataType: 'json', 
        cache: false, 
        error: function(){return false;}, 
        success:function(obj){
				$("#run").rotate({ 
					duration:3000, //转动时间 
					angle: 0, //默认角度
					animateTo:360*6+obj.rotate, //转动角度 
					easing: $.easing.easeOutSine, 
					callback: function(){ 
						alert(obj.results); 
						$("#btn_run").attr('disabled',false).css("cursor","pointer"); 
					} 
				});
        } 
    }); 
};
	
</script>  
</body>
</html>

2.php页面

$prize_arr = array( 
    '0' => array('id'=>1,'prize'=>'一等奖','rotate'=>60,'v'=>1), 
    '1' => array('id'=>2,'prize'=>'二等奖','rotate'=>80,'v'=>2), 
    '2' => array('id'=>3,'prize'=>'三等奖','rotate'=>100,'v'=>5), 
    '3' => array('id'=>4,'prize'=>'四等奖','rotate'=>120,'v'=>7), 
    '4' => array('id'=>5,'prize'=>'五等奖','rotate'=>140,'v'=>10), 
    '5' => array('id'=>6,'prize'=>'六等奖','rotate'=>40,'v'=>25), 
    '6' => array('id'=>7,'prize'=>'七等奖','rotate'=>20,'v'=>50) 
); 
foreach ($prize_arr as $key => $val) { 
    $arr[$val['id']] = $val['v']; 
} 
 
$rid = getRand($arr); //根据概率获取奖项id 
//$res = function getGift($arr,'v');个人觉得这种算法比较好
$res = $prize_arr[$rid-1]; //中奖项 

die(json_encode($res));

3.算法

这里有两种算法。第一种是我在网上找的，基本上都是这种算法。

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;
}

//抽奖算法
function getGift($arr,$key='rotate', $baseNum=3000, $baseDiv=1000, $array=array()){
    $num = mt_rand(1, $baseNum);
    foreach($arr as $k => $v){
        $arr_num = $v['rotate']*3000/1000;
        if ($num <= $arr_num) {
            if($v['num'] <= 0){//判断奖品是否抽完
                continue;
            }
           return  $v;            
        }
    }
    return $array;
}

zhabao123456

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JQ+Php实现抽奖大转盘

本文介绍利用JQ+php实现大转盘的效果。原理：前端ajax -> php（算法）得出奖品 --》JQ（ajax）根据奖品显示给用户相应的奖品1.前端页面 js插件可以网上找一下转盘抽奖*{padding:0; margin:0;}.lotteryMain{ width:100%; padding:20px 0; }.lotteryBg{ w
复制链接

扫一扫