javaScript实现抽奖大转盘（一）

今天试了试自己写个抽奖大转盘。
先是借了两张别人的图片：


下面是布局部分：

   <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&&deg<=51){
            alert("免单4999");
        }else if(deg>51&&deg<=102){
            alert("免单50")
        }else if(deg>102&&deg<=153){
            alert("免单10")
        }else if(deg>153&&deg<=204){
            alert("免单5")
        }else if(deg>204&&deg<=255){
            alert("免分期")
        }else if(deg>255&&deg<=306){
            alert("提额度")
        }else{
            alert("未中奖")
        }
        box.dataset.rotate=deg;
        box.style.transform="rotate("+deg+"deg)";
        box.style.transition="";
    }