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