标签：blog timeout 代码 com no-repeat nsf out absolute 总结
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）旋转度数的设置（间歇调用，判断语句）
效果如下：
标签：blog timeout 代码 com no-repeat nsf out absolute 总结
原文地址：http://www.cnblogs.com/winpin-li-home1001/p/7905064.html
