需要js插件（下载包地址：http://download.csdn.net/detail/wyz365889/7798255）：
jquery
jQueryRotate.2.2.js
jquery.easing.min.js
前端显示代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="微信">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>幸运大转盘</title>
<style type="text/css">
body,div,img {margin:0; padding:0; border:0 none;}
#bg {background:url(img/bodybg.jpg) repeat scroll;}
#outer {position:relative; width:100%; top:20px; margin-bottom:30px;}
#disk {margin:0 auto; width:300px;height:300px; max-width:300px;}
#disk img{ margin:0 auto;display:block; max-width:100%; }
#inner {position:absolute; width:100%; top:107px;}
#start {margin:0 auto; width:100px; height:104px; max-width:106px;}
#start img {display:block; margin:0 auto; max-width:100%; }
#set {background-color: #FEF8B2; border-radius: 5px; padding: 2px;}
</style>
<script type="text/javascript" src="JQM/jquery.js"></script>
<script type="text/javascript" src="JQM/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="JQM/jquery.easing.min.js"></script>
</head>
<body id="bg">
<div class="luckywheel">
<div id="outer">
<div id="disk"><img src="img/disk.png" /></div>
</div>
<div id="inner">
<div id="start"><img alt="start.png" src="img/start.png" id="startbtn"/></div>
</div>
</div>
<div id="set">
</div>
<div id="explain">
</div>
</body>
<script type="text/javascript">
$(function(){
$("#startbtn").click(function(){
alert("start");
lottery();
})
});
function lottery(){
$.ajax({
type: 'POST',
url: 'dealdata.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.prizename; //奖项
$("#startbtn").rotate({
duration:3000, //转动时间
angle: 0,
animateTo:1800+a, //转动角度
easing: $.easing.easeOutSine,
callback: function(){
var con = confirm(p+'\n还要再来一次吗？');
if(con){
lottery();
}else{
$("#startbtn").bind('click',lottery);
return false;
}
}
});
}
});
}
</script>
</html>
后台处理概率代码：
<?php
$prizeinfo_arr = array(
0 => array('id'=>1, 'min'=>array(347), 'max'=>array(13), 'prizename'=>'一等奖', 'gl'=>1),
1 => array('id'=>2, 'min'=>array(107,227), 'max'=>array(133,253), 'prizename'=>'二等奖', 'gl'=>2),
2 => array('id'=>3, 'min'=>array(47,167,287), 'max'=>array(73,193,313), 'prizename'=>'三等奖', 'gl'=>3),
3 => array('id'=>4, 'min'=>array(17,77,137,197,257,317), 'max'=>array(43,103,163,223,283,343), 'prizename'=>'未中奖', 'gl'=>4),
);
foreach ($prizeinfo_arr as $key=>$val)
{
$glarr[$val['id']] = $val['gl'];
}
function getRand($glarr)
{
$glsum = array_sum($glarr);
foreach ($glarr as $key=>$nowgl)
{
$randNum = mt_rand(1, $glsum);
if($randNum <= $nowgl)
{
$getid = $key;
unset($glarr);
return $getid;
}
else
{
$glsum -= $nowgl;
}
}
}
$glid = getRand($glarr); //获取中奖随机概率的id
$res = $prizeinfo_arr[$glid-1];
$min = $res['min'];
$max = $res['max'];
if($res['id'] == 4)
{
$i = mt_rand(0, 5);
$prizeinfo['angle'] = mt_rand($min[$i], $max[$i]);
}
if($res['id'] == 1)
{
$prizeinfo['angle'] = mt_rand($min, $max);
}
else
{
$i = mt_rand(0, 1);
$prizeinfo['angle'] = mt_rand($min[$i], $max[$i]);
}
$prizeinfo['prizename'] = $res['prizename'];
echo json_encode($prizeinfo);
?>
效果图：
【微信公众平台开发】微信幸运大转盘
时间： 2024-10-12 22:15:33