抽獎代碼里要註意一個地方，就是轉動角度：在電腦語言里，逆時針的轉動才算是正方向，而順時針為負方向。 總結步驟：1.找好圖片素材，當然也可以自己設計一個。（圓盤和指針） 2.先用html將素材寫至頁面當中。 3.設置好樣式，呈現好看的頁面效果。 4.最重要的部分就是在js這塊的實現部分： . （1） ...
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）旋轉度數的設置（間歇調用，判斷語句）
效果如下：
