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截圖:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIyVGduV2QvwVe0lmdhJ3ZvwFM38CXlZHbvN3cpR2Lc1TPB10QGtWUCpEMJ9CXsxWam9CXwADNvwVZ6l2c052bm9CXUJDT1wkNhVzLcRnbvZ2LcZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39TM4ITOxgzM3EjMyATM1EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)