今天试了试自己写个抽奖大转盘。
先是借了两张别人的图片:
下面是布局部分:
<div class="round">
<div class="box">
<img src="turntable.png" alt="">
</div>
<div class="btn">
<img src="pointer.png" alt="">
</div>
</div>
css部分:
.round{
position: relative;
width: 450px;
height: 450px;
}
.btn{
position:absolute;
top:50%;
left: 50%;
margin-top: -138px;
margin-left: -94px;
}
接下来是JavaScript部分,并使用了css3:
var round=document.getElementsByClassName("round")[0];
var box=round.getElementsByClassName("box")[0].children[0];
var btn=round.getElementsByClassName("btn")[0];
btn.onclick=function(){
var deg=Math.floor(Math.random()*360);
var num=8;
var rotateDeg=num*360+deg;
box.style.transform="rotate("+rotateDeg+"deg)";
box.style.transition="5s";
setTimeout("res("+deg+")",5000)
}
function res(deg){
if(deg>=0&°<=51){
alert("免单4999");
}else if(deg>51&°<=102){
alert("免单50")
}else if(deg>102&°<=153){
alert("免单10")
}else if(deg>153&°<=204){
alert("免单5")
}else if(deg>204&°<=255){
alert("免分期")
}else if(deg>255&°<=306){
alert("提额度")
}else{
alert("未中奖")
}
box.dataset.rotate=deg;
box.style.transform="rotate("+deg+"deg)";
box.style.transition="";
}