JS实现抽奖大转盘

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


下面是布局部分：

<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="";
   }