幸運抽獎，

幸運抽獎，

    var oPointer=document.getElementsByTagName("img")[0];    var oTurnable=document.getElementsByTagName("img")[1];    var cat=15;//每個地區15度，一共24個地區    var num=0;    var offOn=true;//是否正在抽獎    //指標點擊事件，開始抽獎    oPointer.onclick=function(){        if(offOn){            oTurnable.style.transform="rotate(0deg)";            offOn=!offOn;            ratating();        }    }    //旋轉    function ratating(){        var timer=null;        var rdm=0;//隨機度數        clearInterval(timer);        timer=setInterval(function(){            if(Math.floor(rdm/360)<3){                rdm=Math.floor(Math.random()*3600);            }            else{                oTurnable.style.transform="rotate("+rdm+"deg)";                clearInterval(timer);                setTimeout(function(){                    offOn=!offOn;                    num=rdm%360;//                    轉盤逆時針的角度為正值                    if(num<=cat*1){                        alert("四等獎");                        console.log("rdm="+rdm+",num="+num+","+"四等獎");                    }                    else if(num<=cat*2){                        alert("周君記");                        console.log("rdm="+rdm+",num="+num+","+"周君記");                    }                    else if(num<=cat*3){                        alert("二等獎");                        console.log("rdm="+rdm+",num="+num+","+"二等獎");                    }                    else if(num<=cat*4){                        alert("周君記");                        console.log("rdm="+rdm+",num="+num+","+"周君記");                    }                    else if(num<=cat*5){                        alert("三等獎");                        console.log("rdm="+rdm+",num="+num+","+"三等獎");                    }                    else if(num<=cat*6){                        alert("四等獎");                        console.log("rdm="+rdm+",num="+num+","+"四等獎");                    }                    else if(num<=cat*7){                        alert("幸運獎");                        console.log("rdm="+rdm+",num="+num+","+"幸運獎");                    }                    else if(num<=cat*8){                        alert("周君記");                        console.log("rdm="+rdm+",num="+num+","+"周君記");                    }                    else if(num<=cat*9){                        alert("一等獎");                        console.log("rdm="+rdm+",num="+num+","+"一等獎");                    }                    else if(num<=cat*10){                        alert("周君記");                        console.log("rdm="+rdm+",num="+num+","+"周君記");                    }                    else if(num<=cat*11){                        alert("幸運獎");                        console.log("rdm="+rdm+",num="+num+","+"幸運獎");                    }                    else if(num<=cat*12){                        alert("四等獎");                        console.log("rdm="+rdm+",num="+num+","+"四等獎");                    }                    else if(num<=cat*13){                        alert("三等獎");                        console.log("rdm="+rdm+",num="+num+","+"三等獎");                    }                    else if(num<=cat*14){                        alert("周君記");                        console.log("rdm="+rdm+",num="+num+","+"周君記");                    }                    else if(num<=cat*15){                        alert("二等獎");                        console.log("rdm="+rdm+",num="+num+","+"二等獎");                    }                    else if(num<=cat*16){                        alert("周君記");                        console.log("rdm="+rdm+",num="+num+","+"周君記");                    }                    else if(num<=cat*17){                        alert("四等獎");                        console.log("rdm="+rdm+",num="+num+","+"四等獎");                    }                    else if(num<=cat*18){                        alert("幸運獎");                        console.log("rdm="+rdm+",num="+num+","+"幸運獎");                    }                    else if(num<=cat*19){                        alert("周君記");                        console.log("rdm="+rdm+",num="+num+","+"周君記");                    }                    else if(num<=cat*20){                        alert("幸運獎");                        console.log("rdm="+rdm+",num="+num+","+"幸運獎");                    }                    else if(num<=cat*21){                        alert("四等獎");                        console.log("rdm="+rdm+",num="+num+","+"四等獎");                    }                    else if(num<=cat*22){                        alert("三等獎");                        console.log("rdm="+rdm+",num="+num+","+"三等獎");                    }                    else if(num<=cat*23){                        alert("周君記");                        console.log("rdm="+rdm+",num="+num+","+"周君記");                    }                    else if(num<=cat*24){                        alert("幸運獎");

                        console.log("rdm="+rdm+",num="+num+","+"幸運獎");                    }                },4000);            }        },30);    }

 

  #bg{            width: 650px;            height: 600px;            margin:0 auto;            background: url(turnable-bg.jpg) no-repeat;            position:relative;        }        /*img從alt開始匹配，直到pointer結束為止*/  img[alt="pointer"]{            position:absolute;            top:125px;            left:310px;            z-index:10;        }  img[alt="turnable"]{            position:absolute;            z-index:5;            top:50px;            left:80px;            transition:all 4s;        }        

 

<div id="bg">    <img src="指標.png" alt="pointer" width="31px" height="182px">    <img src="轉盤.png" alt="turnable" width="496px" height="500px"></div>

 抽獎代碼裡要注意一個地方，就是轉動角度：在電腦語言裡，逆時針的轉動才算是正方向，而順時針為負方向。

總結步驟：1.找好圖片素材，當然也可以自己設計一個。（圓盤和指標）

                  2.先用html將素材寫至頁面當中。

                  3.設定好樣式，呈現好看的頁面效果。

                  4.最重要的部分就是在js這塊的實現部分：

.                         （1）點擊事件；

                           （2）旋轉度數的設定（間歇調用，判斷語句）

　　　　　　效果如下：