幸运抽奖

来源:转载

 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)旋转度数的设置(间歇调用,判断语句)

效果如下:

分享给朋友:
您可能感兴趣的文章:
随机阅读: