码迷,mamicode.com
首页 > 微信 > 详细

【微信公众平台开发】微信幸运大转盘

时间:2014-08-21 19:25:44      阅读:477      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   java   os   io   


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

效果图:
bubuko.com,布布扣

【微信公众平台开发】微信幸运大转盘,布布扣,bubuko.com

【微信公众平台开发】微信幸运大转盘

标签:des   style   blog   http   color   java   os   io   

原文地址:http://blog.csdn.net/qivan/article/details/38734311

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!