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)" 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截图：