一 index.html
<!DOCTYPE HTML>
<html>
<head>
<title>圆盘抽奖</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style>
.panel{height:285px;margin:0 auto;position:relative;overflow:hidden;}
.panel .panel-face{background-image:url(//game.gtimg.cn/images/js/loteryround/ossweb-img/face.png);background-size:cover;width:232px;height:232px;position:absolute;left:42px;}
.panel .panel-btn{width:90px;height:106px;position:absolute;top:64px;left:115px;background-image:url(//game.gtimg.cn/images/js/loteryround/ossweb-img/btn.png);background-size:cover;}
.panel.playing .panel-btn{-webkit-transform:scale(0.9);transform:scale(0.9);}
</style>
</head>
<body>
<div id="ltpanel" class="panel"></div>
<script src="js/zepto.min.js"></script>
<script src="js/loteryround.min.js"></script>
<script src="js/jquery.js"></script>
<script>
// 转盘初始化
// 第一个参数是奖品的个数
// 第二个是用来旋转的圆盘(指针不动)
var panel=new PanelLotery({
length:8,
el:'#ltpanel'
});
$('.panel-btn').on('click', function(event) {
event.preventDefault();
if(panel.playing) return;
// 演示用,随机转到奖品n
// 初始的指针右侧开始
// 顺时针方向开始算
// 第一个奖品是n=0
//var n=Math.floor(Math.random()*8);
//console.log(n);
$.ajax({
type:'GET',
url:'http://127.0.0.1/rotate/rotate.php',
data:{username:'xw',password:'123456'},
dataType:'json',
success:function(data){
alert(data);
n = data;
panel.playto(n,function(){
alert(n);
});
},
error:function(){
alert("错误");
}
});
});
</script>
</body>
</html>
二roate.php
<?php
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];
if($password!="123456")
echo json_encode(7);
$awards = array(
"0"=>"688888金币",
"1"=>"500砖石",
"2"=>"京东200购物券",
"3"=>"apple watch",
"4"=>"8888金币",
"5"=>"58888金币",
"6"=>"ipone6s",
"7"=>"砖石"
);
$randnum = rand(1,100);
if($randnum<=20 && $randnum>=1){
$key = 1;
}else if($randnum<=100 && $randnum>20){
$key = 3;
}
else{
$key = 10;
}
//$returnData = $awards[$key]
echo json_encode($key);
?>