你的位置:首页 > 网页设计

[网页设计]幸运抽奖

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

      效果如下: