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=rdm60;
// 转盘逆时针的角度为正值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）旋转度数的设置（间歇调用，判断语句）
效果如下：
