찾다
php教程php手册php+jQuery实现网络转盘抽奖

php+jQuery实现网络转盘抽奖

Jun 06, 2016 pm 07:58 PM
회사성취하다회로망턴테이블

最近公司在搞节日活动,进行抽奖活动,无奈奖品很诱人,但是都是摆设,在网上找了一下,又加上自己的改进 1.新建一个html页面,css样式,布局啥的,网上down的图片 !DOCTYPE HTMLhtmlheadmeta charset=utf-8meta name=keywords content=jquery/meta name=des

最近公司在搞节日活动,进行抽奖活动,无奈奖品很诱人,但是都是摆设,在网上找了一下,又加上自己的改进


php+jQuery实现网络转盘抽奖

1.新建一个html页面,css样式,布局啥的,网上down的图片



		<meta charset="utf-8">
		<meta name="keywords" content="jquery">
		<meta name="description" content="抽奖大转盘">
		<title>PHP+JQUERY实现抽奖大转盘</title>
		<script type="text/javascript" src="../../../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
		<style type="text/css">
				.demo{width:417px;height:417px;position:relative;margin:50px auto}
				#disk{width:417px;height:417px;background:url(disk.jpg) no-repeat;}
				#start{width:163px;height:320px;position:absolute;top:46px;left:130px;}
				#start img{cursor:pointer}
		</style>
		<script type="text/javascript">
				$(function(){
						$("#startbtn").click(function(){
								lottery();
						});
				});
				function lottery(){
						$.ajax({
							type:&#39;POST&#39;,
							url:&#39;data.php&#39;,
							dataType:&#39;json&#39;,
							cache:false,
							error:function(){
								alert(&#39;出错啦!&#39;);
								return false;
							},
							success:function(json){ 
									$("#startbtn").unbind(&#39;click&#39;).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(&#39;恭喜你,中得&#39;+p+&#39;\n还要再来一次吗?&#39;); 
											if(con){ 
												lottery(); 
											}else{ 
												return false; 
											} 
										} 
									}); 
								} 
							}); 
				}
		</script>


		<div class="demo">
				<div id="disk"></div>
				<div id="start"><img  src="/static/imghwm/default1.png" data-src="start.png" class="lazy" id="startbtn" alt="php+jQuery实现网络转盘抽奖" ></div>
		</div>


2.php程序处理页
<?php $prize_arr=array(
        &#39;0&#39;=>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)
);

//概率函数
function getRand($proArr) {
    $result = '';
     //概率数组的总概率精度
    $proSum = array_sum($proArr);
     //概率数组循环
    foreach ($proArr as $key => $proCur) {
        $randNum = mt_rand(1, $proSum);
        if ($randNum $val){
        $arr[$val['id']]=$val['v'];
}
$id=getRand($arr);//根据概率获取奖项id
$res=$prize_arr[$id-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']=iconv('gb2312','UTF-8',$res['prize']);
echo json_encode($result);
exit;
?>


성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구