css3转盘抽奖示例-转指针

css代码：

.draw-out{width:400px;height:400px;margin:30px auto;position:relative}
.draw-out section{width:400px;height:1px;background:#d6d6d6;position:absolute;top:200px;left:0}
.draw-out section.s2{transform:rotateZ(60deg)}
.draw-out section.s3{transform:rotateZ(120deg)}
.draw-out p{position:absolute;}
.draw-out p.p1{top:105px;left:300px}
.draw-out p.p2{top:240px;left:300px}
.draw-out p.p3{top:310px;left:170px}
.draw-out p.p4{top:240px;left:60px}
.draw-out p.p5{top:105px;left:60px}
.draw-out p.p6{top:30px;left:170px}

.draw{width:400px;height:400px;border:2px solid #E17F27;border-radius:200px;position:absolute;}
.draw-in{width:80px;height:80px;padding:1px;margin:157px 157px;
transition:all 4s ease;
-webkit-transition:all 4s ease;
-moz-transition:all 4s ease;
-o-transition:all 4s ease;
}
.draw-in div{background:#E17F27;width:40px;height:40px;border-radius:33px;position:relative;margin:20px 20px}
.draw-in div .circle{display:block;width:0;height:0;border:10px solid transparent;border-bottom:40px solid #E17F27;position:absolute;left:10px;top:-44px}
.btn{display:block;margin:30px auto;width:100px;height:30px;border-radius:6px;background:#0ABF5D;color:#fff;text-align:center;line-height:30px;text-decoration:none}
.result p{color:#c00}
           

html代码：

<div class="draw-out">
    <div class="draw-bottom">
        <section class="s1"></section>
        <section class="s2"></section>
        <section class="s3"></section>
        <p class="p1">一等奖</p>
        <p class="p2">二等奖</p>
        <p class="p3">三等奖</p>
        <p class="p4">四等奖</p>
        <p class="p5">五等奖</p>
        <p class="p6">六等奖</p>
    </div>

    <div class="draw">
        <div class="draw-in">
            <div><em class="circle"></em></div>
        </div>
    </div>
</div>
<a href="javascript:void(0)" target="_blank" rel="external nofollow"  class="btn">来一下</a>
<div class="result"></div>
           

js代码：

$(function(){
	var orignal_deg=-30;
	var last_deg=0;
	var btn_flag=0;
	$('.btn').on('click',function(){
		if(btn_flag==0){
			btn_flag=1;
			$.post('result.php',function(res){
				var response=JSON.parse(res);
				var rand=Math.ceil(Math.random()*10);
				//$rand_deg随机度数 只能在6-54
				if(rand==10){
					var $rand_deg=9*6;
				}else{
					var $rand_deg=rand*6;
				}

				var $curr_deg=360-(60*(response.status+1))+$rand_deg;
				var deg=orignal_deg+4*360-last_deg+$curr_deg;

				orignal_deg=deg;
				last_deg=$curr_deg;

				var $draw=$('.draw-bottom');
				$draw.css({"transform":"rotateZ("+deg+"deg)"});
				setTimeout(function(){
					$('.result').append('<p>'+response.msg+'</p>');
					console.log('您转了'+$curr_deg+'度！');
					btn_flag=0;
				},4000);
			});
		}
	});
});
           

result.php代码：

$arr=array(5,10,10,15,20,40);

$res=get_rand($arr);
if($res==0){
	$msg="您抽取了一等奖";
}else if($res==1){
	$msg="您抽取了二等奖";
}else if($res==2){
	$msg="您抽取了三等奖";
}else if($res==3){
	$msg="您抽取了四等奖";
}else if($res==4){
	$msg="您抽取了五等奖";
}else if($res==5){
	$msg="您抽取了六等奖";
}
$res_data=array(
		'status'=>$res,
	'msg'=>$msg
);
echo json_encode($res_data);


//概率计算函数
function get_rand($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;
} 
           

demo示例：http://test.ixiewei.com/luck-draw/index.php

demo截图：